全部技能 / 设计 / design-style-picker
设计 · daymade/claude-code-skills

design-style-picker

Batch-generate and compare visual design directions so a user can choose the style they actually want. Use when the user says they cannot describe an abstract visual style, asks for many style options, wants to choose from generated UI/design-system images, rejects outputs as too colorful/too dead/too generic, or needs an existing UI/design system evolved without discarding current assets.

风险提醒:绿色 · 放心使用AI 侦查报告
作者 daymadeGitHub daymade/claude-code-skills ↗Stars 1385许可 MIT(仓库根 LICENSE;GitHub API spdx MIT)commit d5c4678cb5
agent 宿主通常会约束 skill 执行权限;风险提醒为 AI 侦查观点,不构成质量或安全保证。第三方 skill 仅作拆解与展示,安装使用风险自负,版权归原作者。

1实现原理 · 为什么它能做到

纯 prompt 编排技能:无任何脚本/文件/依赖;全部机制是 SKILL.md + references/selection-playbook.md 里给 agent 的工作流与提示词模板,靠宿主现有图像生成与文件读取能力落地。

daymade-codex/design-style-picker/SKILL.md
Use this skill to turn vague taste into concrete visual choices.
注:目录只有 SKILL.md + agents/openai.yaml + references/selection-playbook.md;『生成图片』由 agent 调宿主图像工具完成,SKILL 只规定 prompt pattern 与流程纪律。

核心规则:用户说不清抽象风格就不再追问,改为生成一组结构化的视觉证据(矩阵)让用户指认——用『可见选项』换『可描述词汇』。

daymade-codex/design-style-picker/SKILL.md
Do not ask the user to describe an abstract style if they already said they cannot. Generate comparable visual evidence, let them pick, then implement from the selected references.
注:'Generate A Matrix, Not Minor Variants' 是方法论主干(下一条展开)。

矩阵生成双轴设计:垂直阶梯=单维度大步长变化(如色彩强度 20/35/50/65/80);水平方向=不同组织策略(data-driven color、brand spine、warm product imagery、scenario modules、governance-led layout);两图像若像兄弟必须重生成其一。

daymade-codex/design-style-picker/SKILL.md
Vertical ladder: one dimension changes by large steps, such as color intensity 20/35/50/65/80.
注:selection-playbook.md 给出首轮具体构成:5 张垂直阶梯 + 5 张水平方向 + 1-2 张边界样本(overload/underload)。

颜色当系统用:『less colorful』≠去色,而是减少等权焦点——把颜色分角色(架构宽区/数据可视化语义/品牌高信号点缀/中性常规组件);做边界样本让『太多』可见。

daymade-codex/design-style-picker/SKILL.md
"Less colorful" does not mean black-and-white. It usually means fewer competing focal points.
注:playbook 给组织规则示例:'Data colors live in charts, legends…'、'Brand red lives in logo, active spine, must-block governance…',并列 Bad organization 反例(每 tag/row/icon 各一饱和色等)。

实施从选中图提炼『原则而非像素』:颜色角色/布局密度/焦点层级/组件处理/图像用法/治理位置显式拆出,并按文件命名融合('Use H02 for color placement and V04 for palette intensity'),保持既有 UI 范围。

daymade-codex/design-style-picker/SKILL.md
Extract principles, not pixels: color roles, layout density, focal hierarchy, component treatment, image use, governance/data placement.
注:Playbook 的 Implementation Handoff 强制先写融合声明('I will take <file A> for <specific attribute> and <file B> for …')再动手,做完跑渲染后视觉 QA。

复用既有资产的『演进』立场:先收集现有 UI/截图/tokens/CSS 变量/组件名/品牌线索当起始词汇表,禁止凭空生成无关的 fresh 概念盖掉现状;用户没说丢弃就保留。

daymade-codex/design-style-picker/SKILL.md
Preserve any existing UI, assets, tokens, layout, brand cues, and domain context unless the user explicitly asks to discard them.
注:生成 prompt pattern 首句即 'This is an evolution of the existing UI/design system, not a replacement. Preserve these assets: …'。

2核心能力

01把说不清的口味变成结构化多方案(矩阵)供选择
02垂直阶梯轴(单维大步长)与水平组织策略轴的双轴对比
03色彩角色系统化分配与『太少/正好/太多/过载』边界样本
04生成前资产收集(读截图/tokens/组件名/品牌),演进式生成 prompt pattern 封装
05候选自审(标记 too dead/too colorful/too generic/closest)后带路径+决策注展示
06选中图的显式融合实施(按文件命名各自贡献的属性)+ 渲染后视觉 QA

4风险提醒 风险提醒:绿色 · 放心使用

风险提醒:绿色 · 放心使用
  • 依赖宿主图像生成质量与可用性 — 无自带生成后端;宿主无图像工具或质量差时矩阵无从谈起(SKILL 未提供降级路线)。
  • 评审标签与推荐样本的锚定效应 — agent 自审标注('likely too dead/too colorful')会先入为主影响用户选择;SKILL 要求标路径+短决策注,属对话性引导而非事实。
  • 实施边界靠 prompt 约束 — 『Keep implementation scoped to the existing UI』等是文本纪律,无技术强制;agent 不遵守时会越界重做系统。
风险提醒:绿色,放心使用。纯 prompt 编排:无脚本执行、无网络外发、无凭证读取、无本地写入(skill 自身零代码文件);图像生成走宿主既有工具,其网络/密钥面由宿主环境决定而非本 skill。注意点仅为对话性引导(评审样本标签可能锚定用户选择)与宿主工具权限边界。

5第二遍独立确认

  • [ok] 无脚本/可执行代码 — 目录仅 3 文件:SKILL.md、agents/openai.yaml、references/selection-playbook.md,无 scripts/。
  • [ok] SKILL 与 playbook 一致性 — playbook Session Pattern 8 步与 SKILL Workflow 1-6 对应;色彩阶梯 20/35/50/65/80/Overload 与 SKILL 'color intensity 20/35/50/65/80' 一致。
  • [ok] 无网络/凭证/写盘代码 — 三文件均为 markdown/yaml 文本,token 扫描零网络与密钥模式。
  • [unlocatable] 图像生成实现位置 — SKILL 只说 'Generate comparable visual evidence' 与给 prompt pattern,不声明用哪个生成后端——实现落在宿主工具,源码内无法定位生成 API。
  • [ok] 流程有效性(矩阵是否真能逼出口味边界) — 属方法论主张,无法代码验证;SKILL 内嵌 Lessons 与反例显示其基于真实迭代沉淀。

6结论

  • 反直觉设计:用户说不出风格时不逼问,改给批量选项指认
  • 矩阵纪律(大步长+若像兄弟必重生成)保证选项肉眼可分
  • 色彩角色系统 + 边界样本把『too much』可视化,减少来回
  • 演进式实施(preserve 默认 + 显式融合命名)保护既有设计系统不被推翻
  • 适合:适合视觉风格不确定期的快速收敛:设计系统/落地页/业务界面/组件库要『多个肉眼不同的方向』时;适合已有 UI 要演进(保资产+调色/密度/焦点层级)而非推倒重来的场景;适合能批量出图的宿主(Codex 图像输出、多图并行生成)。
    不适合:不适合决策依赖点击后行为/状态流转的交互问题(应走 interaction-design-board);不适合宿主无图像生成能力的纯文本环境;不适合已有精确风格规范只需照做的实现任务(过度生成);不适合最终交付需一个确定设计而非多方案选择的场景。
    安装 agent 直装可复制
    ① 本站镜像 更新 2026-09-09
    方式 A · 人下载镜像包下载 design-style-picker.tar.gz
    sha256: 7a6d0b59f417923b…
    方式 B · JSON 格式安装指南,复制给 agent
    安装指南
    agent 读 JSON 指南后会自动从本站下载安装,无需更多说明。
    ② 上游 GitHub · 原始来源
    能访问 GitHub?直接去上游安装(实时版,可能已更新)GitHub 原始 ↗
    本页镜像锁定 commit d5c4678cb5;上游为实时仓库。
    来源信息 GitHub 原始
    作者 / 仓库daymade / daymade/claude-code-skills
    Stars1385
    最近推送2026-09-09
    本 skill commitd5c4678cb5
    许可MIT(仓库根 LICENSE;GitHub API spdx MIT)
    本站信息
    收录日期2026-09-06
    分类设计
    侦查报告AI 侦查 · 2 遍 · 2026-09-06
    本站镜像与 GitHub 原始是不同来源:本站锁定 commit 快照经 /r2 分发;GitHub 为实时上游,内容可能已更新。
    同分类邻近