不二个人IP设计系统

让 AI 产出具有个人风格、拒绝平庸的专业级网页与图文设计。

详细介绍

Personal Design Skill

一套给 AI 看的个人品牌设计系统。把审美写成操作手册，AI 每次帮你做页面时必须翻这本手册，不能自由发挥。 限制 AI 的自由度 = 保证输出质量。

⚠️ 使用前请先完成 brand-dna.md 的配置： 默认品牌色可直接使用，如需替换成你自己的请同步修改模板变量；并放入你自己的头像。

适用场景

教程型页面（分享会、科普）

活动邀请页 / Landing Page

App 功能型页面

小红书图文卡片（3:4 比例）

公众号排版（杂志编号风）

布局模式探索与组件库预览

效果预览

以下是用这套系统生成的真实页面，可直接在线查看：

教程型 – 分享会页面 ： 在线预览

教程型 – Design Skill 拆解 ： 在线预览

活动页 / Landing ： 在线预览

App 型 / 功能型 ： 在线预览

小红书图文卡片 ： 在线预览

公众号排版 ： 在线预览

布局 Playground（16 种布局模式） ： 在线预览

组件库全览（51 个组件） ： 在线预览

核心能力

预设布局模式 ：AI 只能从 16 种经过验证的布局模式中选择，不能自由发明布局。

组件库 ：51 个可复用组件，禁止使用 HTML 默认样式。

品牌色与字体规范 ：定义主色、强调色、点缀色及字体组合，AI 必须严格遵守。

质量检查清单 ：P0（必须全部通过）、P1（应过）、P2（加分），确保输出符合品牌调性。

7 步工作流 ：从询问需求到交付 HTML，每一步都有明确规范。

工作方式

用户提供 ：

品牌基因配置（ brand-dna.md ），包括颜色、字体、气质关键词、禁忌等。

头像图片（放入 assets/avatar.jpg ）。

可选：替换模板中的作者名，同步修改颜色变量。

AI 处理 ：

按 7 步工作流执行：

询问 5 个问题（类型、受众、几屏、素材、约束）。

读取 brand-dna.md 和对应场景规范文件。

从 assets/ 复制对应模板。

从 layouts.md 选择 3-5 种布局（每个 section 不能相同）。

从 components.md 选择组件。

对照 checklist.md 自检，P0 不通过则打回。

输出 HTML 文件。

用户获得 ：

一个可直接在浏览器中打开查看的 HTML 文件，符合品牌风格。

你需要提供

以下配置是使用前的必要步骤：

配置 brand-dna.md ：

默认品牌色（主色 #2B7FD8 、强调色 #F4D758 、点缀色 #E84A5F ）可直接使用，如需替换：

同步修改 assets/template-*.html 中 :root 的变量。

公众号模板（ template-wechat.html ）为内联样式，需手动搜索替换色值（快捷方法：在所有模板文件中搜索 #2B7FD8 替换为你的主色， #F4D758 替换为强调色， #E84A5F 替换为点缀色）。

放入头像 ：将你的头像图片放入 assets/avatar.jpg 。

替换作者名 ：在 assets/template-cards.html 中替换作者名为你自己的。

你会获得

一个完整的 HTML 页面，无需额外配置即可在浏览器中打开。

页面严格遵循你的品牌规范：颜色、字体、布局、组件、气质。

支持多种类型：教程、活动页、App、小红书卡片、公众号排版。

使用示例

将配置好的仓库链接发给你的 AI Agent，并说：

帮我读这个设计系统，以后做页面按这个规范来。

AI 就会按照 7 步工作流和品牌规范生成页面。

注意事项

前置条件

必须完成 brand-dna.md 的配置（默认品牌色可直接使用，但建议替换为你的品牌色）。

必须放入你自己的头像（ assets/avatar.jpg ）。

限制

AI 不能随便发明布局 → 只能从 16 种里选。

AI 不能随便用颜色 → 只能用你定义的品牌色 + 扩展规则。

AI 不能随便写样式 → 必须从组件库里选。

AI 做完要自检 → 对照 checklist 逐条过，P0 不过就打回。

质量检查要求

P0（必须全部通过） ：

品牌三色比例 · 无禁忌元素 · 无 HTML 默认样式 · 暖底背景 · 衬线+无衬线混搭 · 响应式 · 每 section 布局不同 · clamp() fluid sizing · 截图发社交媒体不会被说“又是 AI 做的”。

P1（应过） ：

至少一个视觉惊喜 section · 字号对比极端 · Scroll Reveal 动效 · 大装饰数字/英文。

P2（加分） ：

图片溢出容器 · 深色面板打破节奏 · 装饰元素克制 · prefers-reduced-motion 。

禁忌

蓝紫渐变 · glassmorphism · neon · bounce 动画 · Inter/Roboto · 所有 section 居中 · HTML 默认样式 · 看起来像 AI 生成的通用模板。

许可证

本设计系统采用 CC BY-NC-SA 4.0 协议。

✅ 可自由使用、修改、分享

✅ 必须署名：ESTHER不二 (esthersjw)

❌ 禁止商用

🔄 修改后必须以相同协议分享

试试这样做

• 请阅读我的设计系统，根据 brand-dna.md 和 template-tutorial.html 的规范，为我设计一个关于“AI 提示词工程”的教程页面。
• 请参考 layouts.md 中的布局模式和 components.md 中的组件，为我创建一个具有视觉冲击力的活动邀请页。
• 请按照小红书卡片模板 template-cards.html 的要求，将这段文字内容转化为一张符合我品牌配色的图文卡片。

作者：esthersjw 自媒体人 / 设计师 ｜ GitHub Stars 417 ｜ 标签：图片设计 发布分发 已认证 开源许可: 未知 License

来源：colaos.ai ｜ Skill ID：esther-design-system