关于 design-brief
design-brief 是一项技能,可将 I-Lang 区块或自然语言描述转化为视觉设计规范。它整理八个视觉维度,生成包含具体设计令牌的 `DESIGN.md` 和 HTML 预览,并在覆盖现有规范前征求确认。
主要功能
- 01接受 I-Lang 或自然语言简报
- 02将方向映射到八个视觉维度
- 03以符合氛围的默认值补足信息
- 04将设计令牌写入 `DESIGN.md`
- 05生成 `brief-preview.html` 预览
适用场景
- 01确定落地页的视觉方向
- 02将配色和氛围转化为具体设计令牌
- 03在替换 `DESIGN.md` 前预览设计简报
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ podo/ design-agent-skills --skill design-brief安装后在 Claude Code 中输入/design-brief确认已加载。
附带文件stub.yaml
详细介绍
design-brief
目录条目 — 完整技能:nexu-io/open-design
决策树
-
是否已安装完整技能?
- 全局:
f=~/.agents/skills/design-brief/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer" - 项目:
f=.agents/skills/design-brief/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer" installed→ 技能已作为design-brief安装,请调用并继续pointer→ 转到步骤 2
- 全局:
-
检测范围,然后安装:
[ -e ~/.agents/skills/design-brief ] && echo "global" || echo "project"全局:
npx skills add https://raw.githubusercontent.com/nexu-io/open-design/main/skills/design-brief/SKILL.md -g -y项目:
npx skills add https://raw.githubusercontent.com/nexu-io/open-design/main/skills/design-brief/SKILL.md -yClaude Code: 在聊天消息中以
!开头发送命令,即可在不离开对话的情况下运行该命令。
注意事项
- 许可证: Apache-2.0
- 名称冲突:
designer-skills也会写入design-brief(无论是安装技能还是写入目录条目);同时安装两者会覆盖先安装的版本。
安装后调用
- 技能名称:
design-brief - 触发短语:"design brief"、"visual brief"、"I-Lang brief"、"structured brief"
功能说明
可以接收 I-Lang 结构化区块([PLAN:@DESIGN|type=saas_landing] |palette=navy_and_white |accent=coral ...)或自然语言("clean, minimal, dark-mode landing page for a developer tool, Inter, no animations")形式的设计简报,将其映射到八个视觉维度(配色、强调色、正文和展示字体、布局模型、氛围、密度、排除项),使用符合氛围的默认值补全未指定的维度,并生成包含具体设计令牌的 DESIGN.md 和预览文件 brief-preview.html。覆盖现有 DESIGN.md 前会先征求确认。
这是视觉方向简报,而不是产品简报:不包含受众、目标或成功指标。frontmatter 中包含一个专用于 OpenDesign 的区块,其他 Agent 会忽略该区块;技能本身是一个独立的单文件。
不适用场景
- 需要包含目标、受众、成功标准和范围的产品或项目简报:
designer-skills软件包包含一个用于编写此类简报的design-brief技能。它会安装到与本技能相同的design-brief目录中,因此请从两者中选择一个 - 通过咨询流程构建完整设计系统(请使用
design-consultation) - 视觉方向已在现有
DESIGN.md中确定
评论
支持 Markdown