🔤 文字动效

#44Sparkles Text 星光文字
hero大标题品牌名
创造力
#45Morphing Text 文字变形
heroslogan轮播
#46Cool Mode 点击粒子爆发
CTA按钮互动彩蛋
#47Typing Animation 打字机动画
hero首屏大标题
#48Kinetic Text 动态字重
交互装饰关于页

← 鼠标悬停字符试试 →

#51Comic Text 漫画文字
趣味标题活动Banner
BOOM!
#52Spinning Text 环形旋转文字
装饰CTA
✦

🃏 卡片

#1A杂志裁切风卡片
功能展示核心卖点

用对话构建产品

不需要写代码，只要描述你想要什么

CONVERSATION-FIRST

一键部署上线

从本地开发到全球发布，一个按钮

SHIP INSTANTLY
#1B编号主导卡片
步骤列表要点
01

明确目标

想清楚你要解决什么问题

02

拆分任务

大目标分解为可执行的小步骤

03

快速验证

最小成本验证假设

#1C标签卡片
分类展示
效率工具

智能日程规划

AI分析习惯，安排最优时间块

知识管理

笔记自动整理

碎片信息自动归类链接

创意工具

一键生成内容

从想法到成品一句话

#1D侧边icon卡片
功能说明
🧠

深度思考引擎

复杂问题自动切换深度推理

⚡

实时协作

多人同编，修改即时同步

#10A三列Chair · 大编号叠底
步骤列表
01

发现问题

观察日常中重复出现的不便

02

设计方案

用最简方式解决核心问题

03

快速上线

完美是好的敌人，先发布再迭代

#10B三列Chair · 杂志排版
理念哲学
i.

Less is More

克制是设计的最高境界

philosophy
ii.

内容为王

形式永远服务于内容

principle
iii.

一致性

视觉语言必须统一

consistency
#10C三列Chair · 手绘虚线框
技能工具
Skill #1

信息架构

把混乱的信息整理成清晰结构

Skill #2

视觉层次

大小、颜色、间距引导视线

Skill #3

微交互

细微动画让产品从可用变为可爱

#10D三列Chair · 渐变底卡
功能亮点
🎯

精准定位

AI分析受众调整内容策略

🛠️

自动化工作流

重复性工作交给机器

🔐

数据安全

端到端加密

#10E三列Chair · 纯文字排版
价值观

真实

不伪装不夸大，承认不足比假装完美更有力量。

authenticity

勇敢

做难而正确的事，短期阵痛好过长期平庸。

courage

节制

知道什么不做比知道什么要做更重要。

restraint
#15书卡 Book Card
书籍推荐
认知科学

思考，快与慢

丹尼尔·卡尼曼

改变了我对「直觉」的信任——大多数时候慢想才是正确答案

心理学决策诺贝尔奖
#21机票卡片 · 复古登机牌
旅行航班
CZ3456中国南方航空
PEK
首都T2
2h30m ✈
SHA
虹桥T2
DEP 08:15 → ARR 10:45
A320neo
Economy
Light Snack
Date
15 JUL
Seat
12A
#22住宿卡片 · 杂志排版风
旅行住宿
上海外滩华尔道夫酒店
Waldorf Astoria Shanghai on the Bund
日期
7/15 — 7/17 · 2晚
房型
外滩景观豪华房 · 45㎡
早餐
含双早
入住
15:00后
⚠ 入住前48小时免费取消
#32悬停揭示卡片
名句展示

上善若水

shàng shàn ruò shuǐ — 《道德经》

最高的善行就像水一样——滋养万物却不与之争

← 悬停查看 →

#34编号卡片网格
并列任务

梳理信息架构

所有内容分组、排序、删减

确定视觉风格

字体、颜色、间距规范

搭建组件系统

可复用的模块化组件

持续迭代优化

每次发布后收集反馈，小步快跑

#37悬停翻转卡片
作品集
阿尔卑斯

瑞士少女峰

海拔4158米

京都

金阁寺

金箔禅意建筑

冰岛

极光

北纬64°奇迹

巴厘岛

乌布梯田

千年水稻梯田

💬 引用 / 金句

#3Key Insight 手写批注风
引用洞察
Key Insight ✦

真正的创造力不是从无到有，而是把已有的东西用全新的方式连接起来。每一个「灵感乍现」的背后，都是大量的阅读、观察和思考的积累。

#6Pull Quote 大字引用
金句单句强调

好的设计是尽量少的设计。少即是多——不是做减法的借口，而是每一个元素都必须证明自己存在的价值。

#38巨大引号居中
金句页

"世界上最有力量的人，是那些能用简单的话说清楚复杂事情的人。"

— 理查德·费曼

#39肖像分割引号
结尾页

"我从不追求完美——完美是一个不存在的终点。"

YOUR NAME

你的一句话介绍

#40极简留白引号
极简

"做一件事情最好的时间是十年前，其次是现在。"

中国谚语
#50Text Highlighter 手绘标注
正文重点

在设计系统中，一致性比创新更重要。每个组件都要证明价值——如果一个元素无法提升用户体验就该删掉。记住：少即是多，这不是口号，是设计原则。

🖥️ 代码 / 终端

#5A代码面板 · macOS窗口
代码展示
agent.config.ts
import { createAgent } from '@cola/sdk'

const agent = createAgent({
  name: '设计助手',
  model: 'claude-4',
  skills: ['design-system', 'code-gen'],
  temperature: 0.7,
})

// 启动Agent并等待用户输入
await agent.listen()
#5B代码面板 · 笔记本纸
伪代码配置
✏️ design-principles.md
# 设计原则

1. 内容优先 → 先有内容再选形式
2. 一致性   → 同类内容用同一种样式
3. 留白     → 给眼睛呼吸的空间
4. 层次     → 大小/颜色/间距引导视线

记住: 少即是多 ≠ 什么都不做
#5C代码面板 · 打字机
流程描述
Step 1: 确定目标用户画像
Step 2: 收集竞品视觉参考
Step 3: 定义品牌色板和字体系统
Step 4: 搭建基础组件库
Output: Design System v1.0 Ready
#5D代码面板 · 极简白底
轻量代码
TS
function buildPage(components: Component[]) {
  return components
    .filter(c => c.isReady)
    .map(c => c.render())
    .join('\\n')
}
#7对话气泡 Chat Bubbles
对话展示AI聊天
帮我做一个设计系统的预览页
好的！需要包含哪些组件分类？文字动效、卡片、引用都要吗？
全部都要，51个一个不落
收到，每个组件配真实中文Demo，给我几分钟 ✨
#25打字机终端风
技术向CLI
design_system.md

> 系统：Esther Design System

> 组件：51个

> 品牌色：蓝#2B7FD8 / 黄#F4D758 / 红#E84A5F

## 字体系统

- 标题：Fraunces / Noto Serif SC

- 正文：Noto Sans SC

- 代码：Fira Code

- 手写：Caveat

⚠️ 禁止使用默认blockquote样式

📐 布局 / 排版

#2Section Header
章节标题
01

设计系统的诞生

#8Tip Header 超大装饰数字
步骤标题
03

建立视觉层次体系

#23报纸多栏排版
信息密度高
THE DAILY BRIEF

AI正在重新定义创作方式

过去创作需要掌握复杂工具链。现在只需一句话描述，AI就能帮你生成初稿。这不是取代创作者，而是解放创作者。

↑ 关键洞察！

组件化思维

把页面拆成独立的、可复用的积木块。一次设计，到处使用。

品牌一致性

颜色、字体、间距用变量管理，改一处全局生效。

重要！

#24全屏大片压字
封面Hero

The Art of
Simplicity.

ESTHER DESIGN SYSTEM — 用最少的元素传达最强的信息

🎛️ 交互

#4Scroll Reveal 滚动入场
动效

✨ 滚动到这里时从下方淡入

IntersectionObserver 监听

#16Filter标签栏
分类筛选
#26横向滑动卡片
并列展示
01

确定信息架构

把所有内容按优先级排列，用户注意力是稀缺资源。

02

建立视觉节奏

大标题→正文→留白→大标题，形成呼吸感。

03

设计交互细节

每个可点击元素都需要hover反馈。微动画让界面"好用"。

04

测试与迭代

发布不是终点，观察真实用户行为后调整。

← 左右滑动 →

#27Tab切换面板
分类内容
视觉设计
交互设计
开发实现

视觉设计原则

色彩传达情绪，字体传达性格，间距传达关系。

品牌蓝 #2B7FD8 → 专业、可信赖

交互设计原则

每个操作给反馈，每个状态可感知，每个错误可恢复。

Hover: translateY(-2px) + box-shadow

开发实现原则

组件化、CSS变量、语义化HTML。

:root 管理全局色板和间距
#28手风琴展开
FAQ
1

什么是设计系统？

▼

一套完整的设计标准——组件、规范、原则和工具，帮助团队高效且一致地构建产品。

2

为什么需要设计系统？

▼

减少重复劳动、保证品牌一致性、加速开发。改一处全局生效。

3

从哪里开始？

▼

先定义颜色和字体，然后做基础组件（按钮、卡片、标题），逐步扩展。

#29箭头轮播
焦点展示
#30堆叠卡片
游戏化
原则一

内容决定形式

先看内容是什么，然后选组件。

原则二

一致性 > 多样性

同类内容用同一种视觉语言。

原则三

动效克制使用

一个页面最多1-2个动效组件。

👆 点击卡片翻到下一张

#31翻转卡片 3D Flip
正反展示

知行合一

↺ 点击翻转

Translation

知道和做到是一回事——真正理解一个道理，必然会体现在行动中。

#33暗底大字揭示
仪式感品牌slogan
道

大道至简

The greatest truths are the simplest — 真正的大道理，往往用最简单的话就能说清楚。
#35交互清单
任务列表

确定色板和字体

品牌蓝、黄、红 + 四种字体

基础

做完卡片组件

5种卡片变体全部实现

组件

写好使用文档

每个组件标注适用场景

文档
#36缩略图轨道+侧面板
画廊
#49Pixel Image 像素渐显
图片展示头像

像素块随机淡入 → 灰度变彩色

📊 对比 / 列表

#12ADo/Don't · 卡片分栏
规范正反例
🚫Don't
  • 每个section都换一种视觉风格
  • 用默认blockquote样式
  • 一个页面放5个以上动效
✅Do
  • 同类内容保持视觉一致
  • 使用设计系统中的引用组件
  • 动效克制，一页最多1-2个
#12BDo/Don't · 手写笔记
教程
— 设计规范 ✏️
别这样 ✗
要这样 ✓
用渐变色块占位
用真实图片和内容
lorem ipsum填充
真实中文demo内容
红色做按钮背景
蓝色/黄色做按钮
#12CDo/Don't · 表格对比
规格比较
实践Don'tDo
使用默认引用样式⛔✅
一致的视觉语言⛔✅
真实内容Demo⛔✅
克制使用动效⛔✅
#12DDo/Don't · 印章边框
设计规范
AVOID
  • 过度设计、过多装饰
  • 不同section不同风格
  • 用AI生成的stock风图片
PREFER
  • 简洁、留白、有呼吸感
  • 统一视觉语言贯穿全页
  • 高清真实图片
#19对比表A · 杂志Editorial
竞品对比
VS04

传统开发 vs AI开发

两种范式的核心差异

01

启动成本

数周学习+环境配置

AI开发

一句话描述即开始

02

迭代速度

天/周级别

AI开发

分钟/小时级别

03

技能门槛

需要专业编程知识

AI开发

会描述需求即可

#20对比表B · 圆点标识
简洁数据对比
开发周期
传统：2-4周
AI：2-4小时
维护成本
传统：持续高
AI：按需低
灵活性
传统：改动慢
AI：实时调整

🧩 其他

#9导航栏
顶部导航
首页作品关于联系
#11系统流程条
流程图工作流
需求分析→信息架构→视觉设计→组件开发→测试上线
#13头像集群
团队展示
设计师创作者AI搭档
#14CTA按钮
行动召唤
#17日历网格
打卡记录
1😊
2🔥
3✨
4😴
5🎯
6📚
7🏃
8💪
9🎨
10☕
11🌟
12📝
13🎉
14😊
#18Modal滚动阅读
详情弹窗
#41横向时间线
步骤流程
Phase 1

探索期

大量阅读、观察、收集灵感

Phase 2

聚焦期

确定方向，深入钻研一个领域

Phase 3

输出期

把积累转化为可见的作品

Phase 4

扩展期

建立系统，影响更多人

#42圆形步骤
循环流程
💡

想法

Ideate
📐

设计

Design
⚙️

开发

Build
🚀

发布

Ship
📊

复盘

Learn
#43用户签名档
页尾个人签名
你的名字
▪️你的一句话介绍
▪️你的第二行签名
esthersjw-design-system