Communitygithub.com

caelo-cms/设计方向

网站设计的第6步。以样式切片或元素拼贴的形式创建三种具有明显差异的视觉方向(颜色、字体、按钮、英雄区片段、卡片、图像,使用真实文案但不包含完整页面布局),沿命名轴分布,让用户根据品牌属性对它们进行评分,并将结果融合为一个方向。当网站需要视觉设计选项、外观和感觉变体或风格方向时使用。

设计方向 是什么?

此技能用于在网站设计流程中的视觉探索阶段生成并评估多个视觉方向。它解决了情绪板过于模糊、而完整页面模型又过于具体的问题,通过生成“样式切片”(Style Tiles)或“元素拼贴”(Element Collages)——仅展示颜色、字体和界面元素,不涉及页面布局——将讨论焦点聚焦于外观和感觉。技能要求用户首先定义2-3条差异轴(例如“冷静 vs 引人注目”),然后为每个方向生成一个独立的HTML文件,包含调色板、字体、按钮、输入框、导航栏、卡片等元素,并强制使用真实文案(来自项目事实文件),禁止使用Lorem Ipsum。之后,通过词汇测试(从品牌属性及其对立面中选择词语)和逐元素评分(用户为每个元素选择来源方向)对方向进行评审,最终将得分最高的元素融合到一个统一的“direction.md”文件中。此技能适用于与AI编码助手(如Claude Code)配合使用的项目,强调快速迭代和基于数据的决策,通常不超过三轮评审。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/caelo-cms/website-design-skills/tree/HEAD/skills/design-directions

在你喜欢的 AI 中提问

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

文档

作为样式切片的方向

原因: 情绪板太模糊,无法在此基础上构建;而完整的页面模型又过于具体:人们会开始讨论在第4步中已经确定的结构。样式切片(Samantha Warren)和元素拼贴(Dan Mall)介于两者之间:它们在不包含页面布局的情况下展示颜色、字体和界面元素,因此讨论能够停留在外观和感觉上。借助AI,变体的成本几乎为零,因此选择成为瓶颈。因此,这一步故意分散方向,并为选择提供了一个衡量标准。

需要: brand.md、taste-profile.md、anti-defaults.md、sitemap.md 和一个线框图(用于文案)、personas.md。 生成: 06-directions/tiles/r<round>/*.html、06-directions/direction.md。

1. 选择轴

命名两个或三个方向之间的差异轴,这些轴来自品味档案中未解决的问题。示例:冷静 ↔ 引人注目、密集 ↔ 通透、温暖 ↔ 冷峻、编辑性 ↔ 技术性、扁平 ↔ 有纹理。将每个方向放置在不同的点上。仅在强调色上有所不同的三个方向算作一个方向。

如果阶段A的情绪板产生了不同的板子,则从它们开始。

2. 构建三个切片

每个方向一个独立的HTML文件。每个切片展示:

  • 一个名称和一句描述其背后的理念(来自品牌,而非趋势)
  • 作为色板展示的调色板及其角色(背景、文字、强调色、操作色),以及文字和按钮的对比度(WCAG AA:文字4.5:1)
  • 字体:展示字体的显示体和正文字体,附带几种字号,以及来自文案草稿的真实标题和段落
  • 界面元素:主按钮和次按钮、链接、输入字段、导航栏、一张卡片
  • 一个英雄区片段(不是完整的英雄区域)以及另一个特征元素:一段引用、一个数字、一个列表、一行价格
  • 图像:样式样本或对照片、插图或屏幕处理的描述
  • 一个只有这个品牌才会有的细节(来自标志的形状、来自行业的术语、一个度量单位)

规则:

  • 首先阅读 anti-defaults.md。仅使用来自具有可用许可证的来源(Google Fonts、OFL、客户授权的字体)的字体;标注许可证和文件大小。
  • 使用来自项目的真实文案,绝不使用Lorem Ipsum。样本界面文本仅使用来自 facts.md 的事实:不得编造功能、优惠、可用性或数字。
  • 无完整页面布局,无完整导航树,无页脚。
  • 在390像素和1440像素下渲染每个切片,并在展示前查看。

3. 评分

在评审页面上,将三个切片并排显示(在移动端上一个接一个显示)。对于每个切片:

  • 词汇测试: 每个切片一个问题。用户(以及可能的同事)从一个混合了品牌属性及其对立面的词汇列表中挑选三个词(复选框,data-max="3")。统计哪一方胜出。
  • 逐元素评分: 每个元素(颜色、字体、按钮、图像、细节)一个问题:哪个切片应该提供此元素,A、B、C还是无,并附带一个理由字段。这样整个表格大约有八个问题。
  • 可选五秒测试: 向项目外的人展示一个切片五秒钟,然后问:“这是什么类型的公司?你想到了哪三个词?”

4. 融合

根据评分结果,编写 direction.md:每个类别选定的元素,来自哪个切片及原因,以及面向第7步悬而未决的内容。如果融合规模较大,则构建一个组合切片并在第2轮中再次展示。运行不超过三轮;如果未能收敛,问题通常出在品牌属性上,因此返回第3步。

完成条件: direction.md 已确认,且针对组合方向的词汇测试指向品牌属性。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相关技能