Turn your coding agent into a disciplined designer-builder.
Most AI design stops at a screenshot that looks finished. The requirements behind it are gone, and the next person cannot tell which choices were deliberate. Ultimate Design keeps that reasoning with the work: it anchors the request, writes the design contract, builds the artifact, critiques it, and checks the rendered result in a browser before delivery.
Live showcase: aa2246740.github.io/ultimate-design
The site was designed and built by agents running this skill. Every demo on it links to the DESIGN.md contract that produced it, so you can check the claims against the work.
Every run produces three things you can keep using:
- Request Anchor — what this run must solve, for whom, and what must not be lost.
DESIGN.mdcontract — tokens, direction, assumptions, and open questions, written so the next agent (or human) can continue without reverse-engineering.- Rendered review — the real page, screenshots, and browser-measured audits.
| Capability | Details |
|---|---|
| Operational design knowledge | 35 concept files across 7 domains — layout, typography, color systems, motion language, content models, accessibility, governance. A concept is loaded on demand and stays active only while it changes a concrete decision. |
| 19 branch playbooks | Marketing sites, product UI, presentation decks, graphic/print, brand systems, motion audits, reference study, audit & polish, and more. |
| 11 bundled validators & tools | Contract validation, OKF-usage validation, a pinned-Chromium rendered UI audit (overflow, clipping, occlusion, target sizes), motion-contract validation, agent-handoff checks. |
| 4 task routes | Build / Audit / Redesign / Study. Audit and Study stop at findings instead of rebuilding what already works. |
| Multi-agent native | Portable Specialist mode: an Integrator routes work orders, specialists return packets, one writer owns the final artifact. Ships with the templates. |
| 12 complete demos | Twelve pages in twelve deliberately different design languages, each designed end-to-end by an agent running this skill, each with its own contract. |
Every demo below is a complete, self-contained page. Click through, copy the prompt that produced it, and read its contract — all twelve in the gallery.
| Demo | Surface | Design language |
|---|---|---|
| Finlytics | SaaS marketing page | Dark data console |
| 山声茶事 | Brand site | Eastern editorial paper |
| TaskFlow | Product dashboard | Quiet daylight system UI |
| 毛茸茸研究所 | Booking landing page | Cream-lab playful |
| 墨记 Q2 复盘 | HTML slide deck | Mineral-paper report |
| GRID&NOISE | Studio portfolio | Neo-brutalism |
| SYSTEMA 2026 | Conference site | Swiss International Style |
| Maison Ombre | E-commerce product page | Quiet luxury |
| FIELD-7 | Hardware product page | Industrial functionalism |
| 街巷 | Independent publication | Newsprint editorial |
| 拾光书房 | Annual data report | Data storytelling |
| 新厅美术馆 | Exhibition page | Bauhaus geometry |
All brands are fictional. The newer styles come from the skill's Study route, which extracts transferable mechanisms from strong reference work without copying any site's signature.
npx ultimate-design-skill@latest --target codex
npx ultimate-design-skill@latest --target claude-code
npx ultimate-design-skill@latest --target pi-agentProject-scoped, shared, and manual installation: integrations/README.md.
Describe the outcome you want:
Use $ultimate-design to turn this report into a clear visual web page. Create DESIGN.md if needed, make the page, critique it, repair it, and verify the rendered result.
To settle the important choices together before it builds, add --pro:
$ultimate-design --pro
I need a product site for investors. Align with me on audience, message hierarchy, brand posture, and acceptance criteria before implementing.
For multi-domain, high-risk work, ask for Portable Specialist mode: an Integrator routes Narrative / Visual / Interaction work orders on a file blackboard and stays the sole final writer. Details: skill/ultimate-design/references/multi-agent-mode.md.
- Anchor the request — original ask, latest overrides, acceptance criteria.
- Shape the content — message hierarchy before layout.
- Load only relevant knowledge — every active concept must change a real decision.
- Choose a direction and build — taste dials, anti-default locks, semantic zone markers.
- Critique, repair, verify — rendered UI audit in a real browser; fix what fails.
- Govern — leave a contract the next agent can continue from.
Visual work gets rendered and reviewed before delivery. The skill ships deterministic tools for it:
npm run flow-check # skill flow integrity
npm run okf-graph-check # knowledge graph consistency
npm run agent-handoff-check # multi-agent handoff schema
npm run check-integrations # host integration healthThe rendered UI audit (validate_html_visual.mjs) measures marked semantic zones in a pinned Chromium: horizontal overflow, clipping, occlusion, spacing, and interactive target sizes. The showcase site and all twelve demos pass it with zero failures.
Ultimate Design 是给 AI Agent 用的设计工作流技能:把设计做出来,也把判断留下来。
大多数 AI 设计止步于一张"看起来完成"的截图。Ultimate Design 让 Agent 像职业设计师一样工作:先理顺需求和内容,再落成真实制品,对着浏览器渲染结果批判、修复、验证,最后把 DESIGN.md 契约留给下一位接手的人。
每次运行留下三件东西:Request Anchor(这次要解决什么、给谁用、什么不能丢)、DESIGN.md 契约(内容顺序、视觉方向、假设与待确认项)、渲染复查(真实页面、截图与浏览器实测审计)。
随包携带:35 个知识概念文件(7 大知识域,按需加载、绑定到具体决策)、19 份分支参考(官网、产品界面、Deck、图形印刷、品牌系统、动效审计……)、11 个内置校验脚本(契约校验、知识使用校验、固定版 Chromium 渲染审计、动效契约校验),以及多 Agent 协作的 Portable Specialist 模式。
官网展示站由本技能自举完成:12 个完整案例覆盖 12 种设计语言(瑞士国际主义、静奢极简、工业功能主义、新闻纸编辑、数据叙事、包豪斯几何、新粗野主义、东方编辑感……),每个案例都附带自己的设计契约和可复现的 Prompt,全部通过渲染审计。
安装(三选一):
npx ultimate-design-skill@latest --target codex
npx ultimate-design-skill@latest --target claude-code
npx ultimate-design-skill@latest --target pi-agent普通用法(说结果,不用背流程):
$ultimate-design 帮我把这份研究做成一个便于阅读的网页。先处理内容和设计方向,再实现、复查并修掉明显问题。
关键选择想先对齐再动手,用 --pro;多域高风险工作可要求 Portable Specialist 模式。