[前端设计 Skills 分享] OJO Design Skills

善宣

[前端设计 Skills 分享] OJO Design Skills

@OJOaidesign
这份 Skills 有点特殊，不是 UI 组件库、不是某种 UI 设计风格的提示词包装，它的思路是给 Coding Agents 提供「设计决策协议」。Coding Agents 被要求按固定步骤做判断，不凭语感直接出界面。

开源地址：
https://github.com/touchine-ojo/OJO-Design-Skills
产品地址：
https://ojo.art

# Skills 对应的工作流

产品类型判断 → 强制做灵感检索 →（创新轨还要先挖品牌感受）→ 给出 2–3 个视觉方向并停住等人选 → Token → 组件（原子 Tailwind）→ 动效 → 布局 → 规范 → 审计。

常规轨（Convention） 适用于 SaaS、后台、效率工具。价值在效用，不在视觉体验。做法是直接领养一套已验证的产品语言。候选池写得很宽：Notion、Linear、Stripe、Things 3、Spotify、Arc、Raycast、GitHub 等，并反复警告不要锁死在 Linear / Stripe / Vercel 这三件套上。

创新轨（Innovation） 适用于消费、品牌电商、生活方式、娱乐。视觉身份本身就是竞争力。先产出 3–5 个感受词，再由 Agent 自己选一种方法论往下推，不再把方法论菜单抛给用户：
· 材质隐喻：产品若是实物，它由什么做成、处在什么光线里
· 原型驱动：魔术师、法外之徒、照顾者这类角色语义
· 叙事驱动：用户被想象置身的具体场景
· 文化符号：包豪斯、孟菲斯、野兽派编辑等运动语法

# 读下来很有参考价值的几处设计

1. 先定语域，再谈风格。 动手前必须从题材、受众、品牌声音里推出五个刻度：能量（静/响）、完成度（毛/精）、密度（疏/密）、重量（轻/重）、严肃度（玩/肃）。每个刻度都要引用证据。

2. 风格确认是硬关卡。 Token 和组件之前必须给出 2–3 个真正不同的方向，纯文本卡片（Feel / Color / Texture / Motion / Layout / Pages），禁止配图，然后等待选择。方向的主分化轴是色相身份和情绪性格，不是明暗三变体（亮 / 暗 / 暖）。

3. 禁的是组合，不是颜色。 单个色相都可以用。禁的是紫主色配深色底、蓝+紫配对、粉青/彩虹渐变、多高饱和强调色叠加发光。米色生活方式、深蓝石板 SaaS、咖啡棕橙也不是禁色，只禁止它们成为未经挑战的整页默认。

4. 产出必须是能写进代码的。 组件要落成原子 Tailwind 类串，覆盖 Default / Hover / Active / Focus / Disabled / Loading / Success / Error。

5. 真实素材和诚实文案被写成与配色同级的规则。 画面位必须是主题相关的真图、截图、渲染或能看清对象的生成位图。没有可信图，就改布局，不准放灰块、假微笑图库、渐变色斑。文案禁止 Lorem、Card title、John Doe、整齐的 $1,000 / +10.0%、满屏 Get Started。指标要像观察值，CTA 要说出动作。