Communitygithub.com

sanky369/original-design

通过交互式对话将产品或主题转化为原创、内部一致的视觉设计语言,适用于信息图、视频故事板、网站或移动应用UI/UX。

original-design 是什么?

该技能通过引导式对话流程,帮助用户为任意产品/主题构建原创的视觉设计语言,避免设计落入俗套或AI默认样式。其核心理念是“设计一个世界,而非设计单个界面”,所有输出都应是这个世界的“人工制品”。该技能支持信息图、视频故事板、网站和移动应用UI/UX等多种媒介。工作流程分为9个阶段:从确定核心隐喻、构建视觉词汇、定义设计DNA(形状、颜色、动效、纹理)、创建吉祥物系统和签名约束,到跨域灵感收集和原创性测试。最终交付物是完整的《设计语言简报》,该简报可作为其他生产技能的输入(如创意策略师、前端设计编排器等),确保所有下游资产风格统一。关键特点包括:一次只处理一个阶段、始终提供建议选项、从网络获取真实参考、以及强制执行的5问原创性测试(每个问题必须回答“是”才能通过)。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/sanky369/vibe-building-skills/tree/HEAD/skills/creative/original-design

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

原创设计

运行一个交互式、问题驱动的会话,将产品或主题转化为完整的设计语言——一个连贯的视觉世界,从中提取每个屏幕、帧、图标、插图和动画作为“人工制品”——并以填充好的设计语言简报形式交付。它适用于任何视觉交付物:信息图、视频故事板、网站或移动应用UI/UX。指导原则是:原创性不在于独一无二——而在于围绕一个核心理念保持内部一致性。 不要问“我如何让它看起来独特?”;要问“核心理念的视觉表现形式是什么?”这个技能所带来的最大转变是:不要设计屏幕——要设计一个世界。 其他一切都是那个世界的一个元素。

何时使用 / 何时不使用

  • 当用户需要原创的视觉标识或艺术指导,或者现有设计显得通用/AI默认样式,需要一个统一理念时使用。
  • 如果用户需要的是实用的品牌风格指南(调色板、字体、用于资产生成的风格),而不是一个原创世界 → skills/creative/creative-strategist;此技能的简报可作为前者的输入。
  • 如果设计语言已存在且用户只需要资产 → 直接进入相应媒介的生产技能(参见阶段9)。
  • 如果问题是UI结构/可用性而非视觉标识 → skills/frontend-design/frontend-orchestrator。

如何运行此技能(先读)

这是一个**引导式对话,而非表单填写。**请遵循以下规则:

  1. 一次只处理一个阶段。 提出当前阶段聚焦的问题,等待回答,用一两句话复述确认,然后继续。切勿一次性贴出全部七个阶段。
  2. 始终提供建议。 对于每个问题,提出2-4个具体选项(优先标记“(推荐)”),以便用户能够快速反应而非从头发明。他们始终可以自主回答。
  3. 在宿主支持时使用结构化问题。 在Claude Code中,对于基于选项的阶段,优先使用AskUserQuestion工具。在其他代理中,用带有简短标记选项列表的纯文本提问。
  4. 在阶段1.5和阶段6从网络收集实时视觉灵感(参见references/inspiration-browsing.md)。选择与宿主代理匹配的浏览方法。
  5. 边做决策边记录到运行中的设计语言简报中(模板位于assets/design-language-brief-template.md)。
  6. 在生成最终输出前,必须通过原创性测试。 切勿跳过。
  7. 将结果移交给所选媒介的生产技能(参见references/medium-playbooks.md)。

将此清单复制到您的工作笔记中并逐项核对:

设计语言进度:
- [ ] 阶段0:构建世界框架(媒介、主题、受众)
- [ ] 阶段1:核心隐喻(一句话)
- [ ] 阶段1.5:灵感扫描(网络)
- [ ] 阶段2:视觉宇宙(词汇表)
- [ ] 阶段3:设计DNA(形状/颜色/动效/纹理)
- [ ] 阶段4:吉祥物系统(如适用)
- [ ] 阶段5:签名约束
- [ ] 阶段6:跨域灵感(网络)
- [ ] 阶段7:生成多个概念 → 选定世界
- [ ] 阶段8:原创性测试(5个问题)—— 关卡
- [ ] 阶段9:撰写简报 + 媒介交接

阶段0 — 构建世界框架

在进行任何视觉设计之前,先明确实际要制作的内容。询问:

  • 我们要创建什么? → 信息图 · 视频故事板 · 网站 · 移动应用UI/UX · 其他
  • 产品/主题是什么?用一句话描述。
  • 目标受众是谁?他们应该感受到什么?

然后向用户明确说出思维转变:“我们不是要设计屏幕。我们要设计一个世界,你的” + 媒介 + “将由那个世界的各种人工制品构成。”

不要停滞不前: 如果请求已经回答了这些问题(例如“为我的儿童数学应用打造一个原创外观”),用一句话将答案作为假设复述出来,然后直接进入阶段1 —— 交互式规则适用于设计问题,而不是重新询问用户已经说过的话。

阶段1 — 定义核心隐喻

一切从核心隐喻出发。

提出解锁性问题:“如果这个产品是一个物理对象或地点,它会是什么?”

根据领域提供种子选项(源自源方法):

产品类型可能的隐喻
数学/学习应用积木
AI导师/助手智慧导师
金融/交易应用指挥中心
旅行应用探险家日记
知识/文档应用活的图书馆

力求一个隐喻,而非三个。然后写出一句话设计语言: “这是一个 [隐喻] —— 所以它看起来像 [感觉/世界]。”

如果他们无法用一句话表达,说明隐喻还不够清晰——继续完善。

阶段1.5 — 灵感扫描(网络)

在定义词汇表之前,为选定的隐喻和风格收集真实参考。按照references/inspiration-browsing.md操作:浏览cosmos.so、Pinterest、Savee、Dribbble、Behance、Are.na以搜索隐喻+风格,收集8-15个参考,并记录重复出现的模式(光照、色温、构图、纹理、形状)。在继续之前将模式总结反馈给用户。

阶段2 — 构建视觉宇宙

列出那个世界中存在的一切。它们将成为你的视觉词汇。

在隐喻确定后,与用户一起集思广益,列举该世界中存在的每个物体、表面、角色和纹理。以活的图书馆为例:书籍、书架、笔记、墨水、印章、书签、纸张纹理。

然后将词汇表明确映射到设计层次:

世界对象对应元素
(例如 书籍、印章)图标
(例如 页边涂鸦)插图
(例如 翻页、墨水扩散)动画/动效
(例如 书架、卡片)UI元素/布局
(例如 墨水、纸张、皮革)颜色
(例如 手写标题)字体排版

目标是6-10个具体元素构成的词汇表。该列表是后续所有内容的唯一真实来源。

阶段3 — 创建你的设计DNA

定义一切都要遵循的系统规则。

锁定四个维度。保持每个维度紧凑 —— 这里的约束正是让设计有设计感的关键:

  • 形状 — 2-3个形状家族(例如 圆角矩形、圆形、立方体)
  • 颜色 — 3-5种核心颜色,名称与世界关联(例如 深海军蓝、电光蓝、暖黄色、柔灰)
  • 动效 — 一个短语描述的理念(例如 “弹性俏皮,兼具目的性”)
  • 纹理 — 一种语言(例如 “纸质、手绘、草图风格”)

记录颜色的精确十六进制值以及动效具体的缓动/时间意图,使简报具备可构建性。

阶段4 — 设计吉祥物系统(适用时)

吉祥物为你的产品提供了一个面孔和个性,并成为世界的核心。

询问吉祥物是否适合该项目。它对于学习型、消费型、儿童型和品牌主导型产品非常有效;对于企业/金融或极简工具通常可省略。如果适用,定义:

  • 它/他是谁(例如 好奇机器人、智慧狐狸、小科学家、活的星座)
  • 个性用3个形容词描述
  • 它如何出现在媒介中(空状态、加载中、引导页、视频中的旁白、信息图中的向导)

为何重要:情感连接、可记忆性,以及它统一了整个体验。

阶段5 — 创建签名约束

约束不会限制创造力。它们创造身份特征。

定义一条设计永不可打破的规则。这个单一决策通常正是使一种语言具有辨识度的关键:

约束产生的风格
不允许使用照片干净、插画风格(类似Zenn)
一切都是几何块结构感强(类似数学应用)
只有黑色、白色加一种强调色锐利、线性(类似Linear)
每个插图看起来必须手绘温暖、人性化(类似Excalidraw)

将约束写成一个可执行的句子:“在这个世界里,我们从不___ / 我们总是___。”

阶段6 — 从无关领域获取灵感(网络)

不要复制竞争对手。从其他世界借用灵感。

从产品类别以外的领域获取灵感以保持新颖:建筑、自然、玩具、古代手稿、科学图表、太空任务、工业机械。使用references/inspiration-browsing.md浏览2-3个无关领域,提取可迁移的想法(来自建筑的网格系统、来自自然的色彩故事、来自科学图表的标注风格)。带回3-5个具体的“借鉴点”。

阶段7 — 生成多个概念,然后选定世界

一个核心理念。多个世界。数量创造产生卓越的可能性。

生成大量简短的概念方向 —— 每个都是表达同一核心理念的不同“世界”(例如 博物馆、宇宙飞船、魔法学院、侦探板、活的大脑……目标是20-50个一行概念)。大多数会很普通;你是在寻找那个非凡的。

分组呈现,让用户反应,然后缩小到1个主要方向(可选1-2个备用)。对于大批量概念,你可以派遣子代理或工作流来扩展概念,但让用户保持在选择循环中。

阶段8 — 原创性测试(关卡)

在生成任何内容之前,运行所有五个问题。**每个答案都应该是“是”。**如果任何一个答案是“否”,则返回相应阶段。

  1. 我能否用一句话解释这种视觉语言?(→ 阶段1)
  2. 是否每个元素都来自同一个隐喻?(→ 阶段2)
  3. 移除标志后我能否仍然识别出产品?(→ 阶段3/5)
  4. 一个孩子会画出同样的设计语言吗?(是否简单明了?→ 阶段3)
  5. 它看起来像是一个世界而非一个UI吗?(→ 整体)

明确地将每个问题及其结论反馈给用户。

阶段9 — 撰写简报并交接

用所有已确定的决策填充assets/design-language-brief-template.md,并将其保存到用户项目中(建议保存为design-language.md)。然后使用references/medium-playbooks.md(在此阶段阅读以获取每媒介转换表)将该语言转化到选定的媒介中,并提供调用匹配生产技能的选项:

  • 信息图/社交图形 → skills/creative/social-graphics、skills/creative/image-generation 或 skills/creative/brand-asset
  • 视频故事板 → skills/creative/remotion-script-writer、skills/creative/product-video 或 skills/creative/creative-strategist
  • 网站 → skills/frontend-design/frontend-orchestrator、skills/frontend-design/design-foundation、skills/frontend-design/color-system、skills/frontend-design/typography-system
  • 移动应用UI/UX → skills/frontend-design/frontend-orchestrator、skills/frontend-design/component-architecture、skills/frontend-design/layout-system

简报即是契约:每个下游资产都必须成为它所描述的世界的一个人工制品。

必选输出格式

交付物是完整的简报 —— 始终遵循assets/design-language-brief-template.md的精确结构,每个部分都填写完整,无一遗漏:

# 设计语言简报 —— [产品/主题]
## 1. 核心隐喻            (一句话设计语言)
## 2. 视觉宇宙          (6-10个词汇元素,映射到图标/插图/动效/UI/颜色/字体)
## 3. 设计DNA               (形状 · 含十六进制值的颜色 · 一个动效理念 · 一种纹理语言)
## 4. 吉祥物系统            (身份/个性/出现位置 —— 或“无”并说明理由)
## 5. 签名约束     (“在这个世界里,我们从不___ / 我们总是___”)
## 6. 跨域灵感 (3-5个具体借鉴点及其来源)
## 7. 选定方向         (获胜的世界 + 1-2个备用方案)
## 8. 原创性测试         (全部五个问题及明确的“是”判定)
## 9. 生产备注         (媒介交接:使用哪个技能,必须遵守什么)

对同一产品运行两次会话必须产生具有相同顺序的这九个部分的简报;只有创意内容不同。

常见错误

错误修复方法
将所有7个阶段作为一份问卷一次性倒出一次一个阶段;每次回答都复述确认
选择3个隐喻“以防万一”强制只选一个——混合隐喻会破坏一致性
跳过网络灵感扫描真实参考可防止生成通用、AI默认的输出
没有签名约束没有约束就没有身份特征(阶段5不可省略)
在定义世界之前先设计屏幕/帧先定义世界;人工制品最后制作
未经过原创性测试就交付5问关卡是强制性的

集成

  • skills/creative/creative-strategist → 消费:简报的设计DNA(颜色、纹理、动效)作为实用资产生成风格指南的原材料。
  • skills/creative/social-graphics、skills/creative/image-generation、skills/creative/brand-asset → 消费:简报;每个生成的资产必须是世界的一个人工制品(仓库图片流水线:docs/creative_cli.py,模型 fal-ai/nano-banana-pro)。
  • skills/creative/product-video、skills/creative/talking-head、skills/creative/remotion-script-writer → 消费:简报作为其节拍、设置和场景所源自的视觉世界。
  • skills/frontend-design/frontend-orchestrator → 消费:简报作为其设计系统技能(design-foundation、color-system、typography-system、layout-system、component-architecture)上的标识层。

核心要义

设计一个世界。其他一切都只是那个世界的一个元素。 每个屏幕、缩略图、图像、图标和动画都应该感觉像是来自同一个宇宙的人工制品。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

相关技能