Design Taste

安装指南

1. ClawHub CLI 从源直接安装技能的最快方式。
   npx clawhub@latest install design-taste
2. 手动安装 将技能文件夹复制到以下位置之一
   全局模式
   ~/.openclaw/skills/
   工作区
   /skills/
   优先级：工作区 > 本地 > 内置
3. 提示词安装 将此提示词复制到 OpenClaw 即可自动安装。
   请帮我使用 Clawhub 安装 design-taste。如果尚未安装 Clawhub，请先安装（npm i -g clawhub）。
   更倾向于下载？
   获取包含原生技能文件的ZIP压缩包。
   下载技能 (.zip)

什么是

Design Taste 是一个用于构建和改进网页、应用、组件、幻灯片、文档、海报和图像的视觉设计技能。它指导代理选择清晰的视觉方向、定义紧凑的 token 系统、构建强力的层级结构，并避免平庸、模板化的结果。对于探索 Openclaw Skills 的开发者来说，它提供了一个实用的工作流，可将设计意图转化为现有项目中一致、可用的输出。
该技能还支持审计与重构、网站基准测试、图像与游戏美术批判以及图像重塑工作流。它强调无障碍性、响应式行为、真实内容和验证，而不仅仅是表面上的润色。其参考指南和审阅脚本有助于使 Openclaw Skills 同时适用于创意实现和结构化视觉评估。

应用场景

构建具有明确视觉方向的新网页、应用屏幕、仪表盘或可复用组件。
审计界面以识别层级、无障碍性、一致性和响应式设计问题。
重构或润色现有产品 UI，同时尊重其当前的设计系统和约定。
创建极简视觉风格或主题幻灯片、文档、报告和 HTML 手册。
审查实时网站 URL 并将其视觉呈现与其他网站进行基准对比。
批判或重塑照片、产品图像、海报、封面、科学图表或 AI 生成的图像。
评估游戏截图、核心美术、商店视觉图、图标、HUD、概念设计或精灵图的类型可读性。
为颜色、排版、间距、圆角、阴影和动效建立设计 token。

工作原理

选择模式： 根据请求选择创建、审计、重构、极简、主题、工件、网站审查、图像审查、游戏美术审查或图像重塑。在适当的时候组合模式并仅加载相关的参考文件。
设定方向： 确定目的与受众、选择特定的色调、定义令人难忘的视觉签名，并兼顾品牌、框架、无障碍性、性能和内容密度约束。
定义系统： 在实现前建立一小套命名的设计 token。使用一致的间距网格、克制的颜色和字体比例以及清晰的视觉层级。
实现或评估： 在项目现有的技术栈中构建工作变更，或遵循选定的审阅工作流并应用其相关的视觉准则和检查。
验证结果： 在大约 375、768 和 1280 像素下检查 token 数量、对比度、交互状态和响应式布局。当渲染可用时，检查截图并修正通用或杂乱的区域。
报告结果： 总结所选方向和取舍。审阅脚本默认可生成英文报告；传递 --lang zh 可获取中文报告骨架。

配置指南

该技能内容未指定包管理器或一键安装程序。使该技能的 references/ 和 scripts/ 文件对代理可用，然后为任务选择相关的工作流。对于图像审查，记录的脚本使用 Pillow 和 NumPy；网站审查脚本使用 Playwright 进行捕获。在运行这些工作流之前，请确保所需的 Python 包和浏览器环境可用。
示例游戏美术审查命令：
python scripts/review_image.py path/to/image.png --type game-screenshot --genre RPG
对于其他图像审查工作流，请参考 references/image-aesthetics.md 和脚本支持的 --type 选项。对于网站审查，请遵循 references/site-review.md 并使用基于 Playwright 的 scripts/review_site.py 工作流。当需要中文报告骨架时，请传递 --lang zh。

数据架构

该技能将指导组织为参考文档、可运行的审阅脚本和支持的基准数据。它没有定义持久化应用程序数据库或通用项目数据架构。
路径或文件 目的与输出
references/direction.md, principles.md, tokens.md 方向选择、视觉原则以及三层 token 模型：原始、语义和组件。
references/audit.md, redesign.md, minimalist.md, theming.md, artifacts.md 用于 UI 审计、重构、极简样式、主题和静态视觉工件的检查清单和工作流。
references/site-review.md, benchmarks.md URL 审查流程、评分指导、行业基准和审查标准。
scripts/benchmarks.csv 包含 147 个评分网站的基准数据集。
references/image-aesthetics.md, image-workflows.md 用于调色板、布局、增强和图形创建的图像审查标准和工作流。
references/game-aesthetics.md, game-workflows.md 游戏美术审查维度、类型配置文件、资产准则和评估工作流。
scripts/review_image.py 图像指标和审阅工件，包括 metrics.json、palette.png、thirds-overlay.png 和 report.md；游戏美术审查还可以生成 grayscale.png 和 thumbnail.png。
scripts/review_site.py 用于网站审查的 Playwright 捕获、指标评分和报告骨架。
图像审查指标可包括调色板、和谐度、色调、清晰度、噪点、色彩丰富度、三分法或质心以及留白。报告使用相关工作流指定的 P0/P1/P2 优先级。

高级特性

模式组合：
配对诸如重构 + 极简等工作流，将样式叠加应用到现有界面。
Token 纪律：
使用原始 → 语义 → 组件 token 系统，使视觉决策保持一致和可维护。
可度量的 UI 检查：
检查颜色和字体数量、圆角、对比度、交互状态和响应式布局，而不是仅仅依赖主观印象。
网站基准测试：
捕获实时站点，根据审查标准对其进行评估，并利用包含 147 个评分网站的 CSV。
图像分析工件：
生成调色板和构图叠加层，以及 JSON 指标和书面报告。
具类型意识的游戏美术批判：
应用 21 种类型配置文件和九种资产准则，并进行缩略图可读性、明度分组、形状清晰度和 HUD 覆盖等检查。
多语言报告：
将报告保留在使用者的语言中，并从脚本中通过 --lang zh 请求中文报告骨架。

name: design-taste description: Design-taste guide for making visual output look intentional, not templated "AI slop". Use to design, build, restyle, redesign, polish, critique or audit a UI (web page, landing page, dashboard, app screen, component), set up design tokens, pick colors/fonts/spacing, theme slides/docs, make a minimalist look, review/benchmark a live website URL, review or restyle images (photo, product, poster, banner, illustration, scientific figure, AI image — composition, palette, AI-artifact critique), review game art (screenshot, key art, Steam capsule, icon, HUD, concept, sprite/pixel; genre readability), or create a poster/cover. Chinese triggers include 设计界面, 美化页面, 界面评审, UI 审查, 重新设计, 改版, 设计规范, 配色, 字体搭配, 极简风格, 主题, 海报, 网站评审, 官网改版, 对标, 图片审美, 图片评审, 海报评审, 配色提取, 构图, 科研配图, AI 图片评价, 游戏美术, 游戏审美, 游戏 UI, RPG, MOBA, 二次元, 像素, 游戏截图评审. Not for backend logic or code cleanup with no visible change. license: MIT

Design Taste

Make deliberate visual decisions, then execute them consistently. Taste here means: one clear direction, few well-chosen tokens, strong hierarchy, and no default-looking filler.

Step 0 — Pick the mode

User intent Mode Load

Build a new page/app/component Create references/direction.md, references/principles.md, references/tokens.md
"Review / audit / what's wrong with this UI" Audit references/audit.md
"Redesign / upgrade / polish / make it premium" Redesign references/audit.md then references/redesign.md
"Minimal / clean / editorial / Notion-like" Minimalist (style overlay) references/minimalist.md
Slides, docs, reports, HTML handouts needing a look Theme references/theming.md
Poster, cover, static art (PNG/PDF) Artifact references/artifacts.md
"Review / score / beautify this website URL", benchmark vs. competitors (评审网站, 网站美化, 对标) Site Review references/site-review.md, references/benchmarks.md, run scripts/review_site.py
"Rate / critique / what's wrong with this image", poster or cover review, AI-image critique (图片审美, 图片评审, 海报评审, AI 图片评价, 构图) Image Review references/image-aesthetics.md, run scripts/review_image.py --type …
Game screenshot / key art / Steam capsule / icon / HUD / concept / sprite review, genre art direction (游戏美术, 游戏审美, 游戏 UI, 游戏截图评审, RPG, MOBA, 二次元, 像素) Game Art Review references/game-aesthetics.md, references/game-workflows.md, run scripts/review_image.py --type game-screenshot|key-art|capsule|icon|game-ui|concept|sprite --genre
"Make this photo a magazine page / product hero / poster", extract a palette, image-model prompts, scientific figures (配色提取, 科研配图) Image Restyle references/image-workflows.md (+ image-aesthetics.md to score before/after)

Modes combine (e.g. Redesign + Minimalist). Read only the files you need.

Report language: write reports in the user's language. The scripts write report.md in English by default; pass --lang zh for a Chinese skeleton.

Step 1 — Decide a direction before touching code

Write 3–5 lines (to yourself or the user) before building:

Purpose & audience — what job does this screen do, for whom?
Tone — choose one specific stance (e.g. editorial, brutalist, soft/organic, technical/dense, luxury/quiet, playful, retro-industrial). "Clean and modern" is not a direction.
Signature — the one thing someone will remember (a type pairing, a bold color field, an unusual grid, a motion moment).
Constraints — existing brand, framework, accessibility level, performance budget.
Density — airy marketing vs. dense tool. Dashboards ≠ landing pages.

If the project already has a design system, the direction is "follow it well"; don't invent a second one.

Step 2 — Core rules (always on)
Commit. A bold minimal design and a maximal one are both fine; a timid average of everything is not.
Tokens, not literals. Every color, size, radius, shadow, and duration comes from a small named scale (see references/tokens.md).
Restraint in counts: ~1 accent color, 1–2 typefaces, ≤ 6–8 font sizes, one radius family, ≤ 3 shadow levels, one easing curve family.
Hierarchy through contrast of size, weight, and space — not more boxes, borders, and colors.
Spacing on a grid (4/8px base). Group related things tightly, separate groups generously.
Accessibility is part of taste: text contrast ≥ 4.5:1 (3:1 large), visible focus, hit targets ≥ 44px on touch, respect prefers-reduced-motion.
Real content. No "John Doe / Acme / Lorem ipsum", no "Elevate your workflow" copy, no emoji as icons.
Every state exists: hover, focus, active, disabled, loading, empty, error.
Step 3 — Avoid the AI-slop fingerprint

Default tells to avoid unless the brief explicitly calls for them:

Purple→blue gradients on white; neon glows on dark; gradient text everywhere.
Inter/Roboto/Arial by reflex; one weight for everything.
Centered hero + three identical icon cards + generic CTA band.
Cards nested in cards; every element in a rounded bordered box with a drop shadow.
Glassmorphism for no reason; random decorative blobs.
Uniform rounded-2xl + shadow-lg on everything; inconsistent radii.
Fake metrics ("10x faster", "99.9%") and stock testimonials.
Bouncy/elastic animation on everything; animating layout properties.

Details and alternatives: references/principles.md.

Step 4 — Execute
Implement real, working code in the user's stack; match existing conventions.
Define tokens first (CSS variables / theme config), then build components from them.
Match effort to direction: maximal designs need elaborate execution; minimal designs need precision in spacing and type.
Step 5 — Verify before handing off

Run the quick checks from references/audit.md (counts of hex colors, font sizes, radii; contrast; states; responsive at ~375/768/1280px). If you can render, take a screenshot and look at it — fix what reads as generic or cluttered. Report the direction you chose and any trade-offs in 2–4 lines.

Reference map

references/direction.md — direction prompts, tone catalog, how to pick fonts/palettes per tone.
references/principles.md — color, typography, spacing, radius, shadow, motion, layout rules + anti-patterns.
references/tokens.md — 3-tier token system (primitive → semantic → component) with example.
references/audit.md — P0/P1/P2 checklist, measurable checks, report format.
references/redesign.md — safe upgrade workflow for existing projects.
references/minimalist.md — warm-monochrome editorial style spec.
references/theming.md — themes for slides/docs/reports; theme recipe.
references/artifacts.md — posters and static visual pieces (philosophy → canvas).
references/site-review.md — URL review workflow: capture → metrics → 45/55 score → P0/P1/P2 report.
references/benchmarks.md — top-company homepage breakdowns, industry playbooks, metric targets, common mistakes.
scripts/review_site.py — Playwright capture + metric score + report skeleton; scripts/benchmarks.csv — 147 scored sites.
references/image-aesthetics.md — image rubric: 8 dimensions × type weights, P0/P1/P2, AI-artifact checklist, metric ranges.
references/image-workflows.md — parse → palette → layout → enhance pipeline; zine/collage/product/palette/cover recipes; Nature-style figure checklist; anti-slop prompt templates.
scripts/review_image.py — Pillow+numpy image metrics (palette, harmony, tone, sharpness, noise, colorfulness, thirds/centroid, whitespace) → metrics.json, palette.png, thirds-overlay.png, report.md.
references/game-aesthetics.md — game rubric: 11 dims (readability, value, gameplay clarity, HUD, VFX…) × asset weights, 21 genre profiles, 9 asset rubrics, AI checks, metric ranges.
references/game-workflows.md — grayscale/silhouette/thumbnail/2-second tests, metric interpretation by genre, P0/P1/P2 report, fix recipes, anti-slop game-art prompts.
scripts/review_image.py --type --genre — adds value bands, figure-ground, shape clarity, HUD coverage, color count, store-thumbnail readability → grayscale.png, thumbnail.png.
references/sources.md — upstream skills, URLs, and licenses.
CredAgent 凭证保护
上下文轮换