OJO Design Skills：为编码代理提供设计决策协议

[前端设计 Skills 分享] OJO Design Skills @OJOaidesign 这份 Skills 有点特殊，不是 UI 组件库、不是某种 UI 设计风格的提示词包装，它的思路是给 ...

[前端设计 Skills 分享] OJO Design Skills @OJOaidesign 这份 Skills 有点特殊，不是 UI 组件库、不是某种 UI 设计风格的提示词包装，它的思路是给 Coding Agents 提供「设计决策协议」。Coding Agents 被要求按固定步骤做判断，不凭语感直接出界面。 开源地址： github.com/touchine-ojo/O… 产品地址： 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 要说出动作。 OJO @OJOaidesign We just open-sourced our first OJO Design Skill. A reusable UI/UX Skill for coding agents like Codex, Claude Code and more. Coding agents are getting better at building. But they still need stronger design judgment. The Skill starts with the product. Explores how it could look and feel. Then turns one direction into a visual system. Taste can be engineered. And now, part of OJO’s design methodology is open for builders to use, improve, and remix ↓ github.com/touchine-ojo/O… 🔗 View Quoted Tweet 💬 0 🔄 3 ❤️ 3 👀 635 📊 2 ⚡