CO

context_uiux_design

Manages UI/UX design documentation and principles.

Install

mkdir -p .claude/skills/context-uiux-design && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13026" && unzip -o skill.zip -d .claude/skills/context-uiux-design && rm skill.zip

Installs to .claude/skills/context-uiux-design

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

Use when the user explicitly asks for 设计稿, 重做设计, UI/UX 设计方案, UI 设计师, UX 设计师, 视觉设计方案, 视觉专家, 交互设计方案, 界面设计方案, 页面设计方案, 原型设计, 线框图方案, 视觉规范, 设计系统方案, DESIGN.md, Impeccable review, UX designer, UI designer, frontend redesign, visual polish, or design system spec in a Minimal Context Harness project. Do not trigger for ordinary UI implementation, CSS tweaks, bug fixes, or generic mentions of 设计, design, or user experience.
416 chars✓ has a “when” triggerlonger than Claude Code's old 250-char listing cap (fine on current versions)
Intermediate

Key capabilities

  • Read global and area-specific context files
  • Create or update DESIGN.md based on user requests
  • Organize user flows, component lists, and interaction details
  • Perform product/page positioning checks for UI changes
  • Check UI controls against a control interaction framework
  • Identify existing visual issues using `npx impeccable detect`

How it works

The skill reads existing context and DESIGN.md, then organizes design conclusions into user flows, component lists, and interaction details. It performs checks for product positioning and UI control semantics.

Inputs & outputs

You give it
User request for UI/UX design, visual design, or design system specifications
You get back
Updated `DESIGN.md` and `project_context/**` files with design conclusions

When to use context_uiux_design

  • Documenting design systems
  • Updating DESIGN.md
  • Defining UI/UX specs
  • Organizing design constraints

About this skill

Context UI/UX Design

Ownership

Own durable Design Authority only: root DESIGN.md, visual identity and exact-value token source/generation direction, visual rationale, canonical adopted-target interpretation/selection basis, adoption records, UI Authority Closure and selected-design alignment.

This Skill does not own product goals/business rules/acceptance (context_product_plan), information/action/feedback and main/drilldown responsibility (context_surface_contract), resource generation (design-resource-authoring), implementation, or acceptance. Route rather than duplicate those owners.

Project-specific UI/UX rules may live in <harnessRoot>/skills/uiux_design/SKILL.md; durable facts remain in DESIGN.md and owning project_context/**. Active Long-Task retains its one Source/Contract lifecycle and Final Gate; this Skill contributes authority closure only.

UI Authority Closure

  1. Read core/default and owning surface/interaction Context, root DESIGN.md, its authored token source/generation direction, existing production route/components and every affected selected exact-target or constraint through its immutable locator. Run ty-context design-resource preflight <handoff.md> before treating a formal handoff as input.
  2. Classify references as exact-target, constraint or inspiration. Inspiration authorizes no reproduction claim. Provider success, a hash/index or an implementation screenshot proves neither selection nor fidelity.
  3. For every affected stable surface/control/target key, classify durable meaning as Context/DESIGN.md covered, requiring update, task-local, out of scope or decision-required. Conflicting, missing, stale, unreadable or unselected authority fails closed for the affected claim.
  4. Confirm exactly one canonical adoption record per adopted target:
    • project/system/component-family targets are fully owned by DESIGN.md;
    • screen/interaction targets are fully owned by the owning Screen Contract, with DESIGN.md keeping only the stable key and owner/anchor;
    • the record preserves interpretation, selection basis, immutable path/URI and digest, applicable conditions and editable upstream owner/locator/update route.
  5. Never overwrite an adopted baseline. Create a new immutable version/digest, review it deliberately and update the unique canonical record. An implementation render/diff is evidence and cannot become the target it claims to match.
  6. Decide exactly one Context Delta: none|required. Durable visual-system, token, rationale, adopted interpretation, owner/anchor or verification-route change is required; ordinary UI/CSS fixes that preserve authority are none.
  7. Route unresolved surface placement to context_surface_contract; route any request to generate/iterate a wireframe, prototype, visual candidate, state study or handoff to design-resource-authoring. Do not invoke resource generation implicitly.

Selected-design alignment

For a selected implementation handoff, consume the actual canonical resource and its dependency/Fact closure; do not stop at an index or aggregate complete label. Preserve exact located values and design-system lineage through stable keys rather than duplicating them into Context.

An exact-target claim requires condition-specific full-target layout and pixel comparison through a project-owned Oracle; a named constraint requires proof of that constraint only. Validate affected state, viewport/platform, theme/mode, content stress, accessibility/input and motion conditions declared by Source. Never replace declared combinations with representative/pairwise sampling unless Source narrows scope or a project-owned complete equivalence proof exists.

Implementation conformance runs on the real production route/component and affected cold-start journey after the final change. Detached specimens and deep links are supplemental. Report conditions not established; resource integrity/preflight is not production conformance, and screenshot baseline replacement merely to erase a failure is forbidden.

DESIGN.md boundary

Use Google @google/design.md compatible structure: supported YAML tokens plus Markdown rationale. Maintain Design Authority status, one authored exact-value token source/generation direction and the canonical records owned at project/system/component-family scope. Do not add unsupported front-matter keys or duplicate exact values already owned by a project-native token source.

If available after a change, run npx @google/design.md lint DESIGN.md. Exported CSS/theme files are generated implementation outputs, not competing authored truth.

Missing/unconfigured authority blocks invented style-bearing production design. Only an explicit request to initialize/generate/select/adopt the project design system routes to design-system-authoring; local fixes and explicit non-fidelity prototypes remain lightweight.

Output

Report affected authority owners/keys, selected resource classification and condition coverage, immutable/editable provenance, closure/update decisions, implementation-alignment checks, unresolved claims and Context: updated ... or Context: no durable fact change.

Do not create a UI lifecycle, resource pack, Product Surface Contract, acceptance record, fixed plan/matrix, phase or second Authority/Gate. Do not write one-time screenshots, test logs, debug notes or implementation summaries into Context/DESIGN.md.

When not to use it

  • Ordinary UI implementation tasks
  • CSS tweaks or bug fixes
  • Generic mentions of design or user experience

Limitations

  • Does not create `plan.md` or Task Contract files
  • Does not update Context for small code tasks or UI bug fixes
  • Does not generate independent UI/UX documents or handoff matrices

How it compares

This workflow systematically documents design decisions and visual specifications in structured files, unlike ad-hoc design changes.

Compared to similar skills

context_uiux_design side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
context_uiux_design (this skill)01moNo flagsIntermediate
brief03moNo flagsBeginner
responsive-design-spec04moNo flagsAdvanced
ux-designer03moNo flagsIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

Search skills

Search the agent skills registry