Design

Skill sssstwee/tastedistill/plugins/tastedistill-claude/claude-skills/design

Local-first memory and workflow plugin for AI coding agents: Codex, Claude Code, agent preferences, project lessons, and delivery rules.

Install

npx -y skills add sssstwee/tastedistill --skill design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Define product direction, interaction principles, UI structure, visual execution rules, and screenshot-based polish before or during frontend implementation. Use when the task involves UI, product design, interaction behavior, visual quality, or design-system consistency. Not for backend-only logic.

SKILL.md

2.1 KB, as published. Nobody here has run it

Design: Make The Interface Intentional

Use this skill for UI and product-facing work.

Prefix your first response line with ⚗️ inline, not as its own paragraph.

Before the workflow, apply ../../shared-rules/personalization.md for explicit TasteD/TasteDistill invocations. Apply ../../shared-rules/runtime-hygiene.md when design verification uses browser screenshots, snapshots, local servers, or generated artifacts.

Outcome Contract

Outcome: a usable interface direction or concrete UI change with clear interaction behavior.
Done when: layout, information hierarchy, states, responsiveness, and visual consistency have been considered and verified when possible.
Evidence: screenshots, rendered UI, existing components, design tokens, accessibility constraints, and user goals.

Workflow

Identify the user workflow and the primary decision on the screen.
Inspect existing UI patterns, tokens, components, and states before adding new ones.
Choose a visual direction in concrete terms, not generic adjectives.
Design the required states: empty, loading, error, disabled, selected, hover, focus, and success.
Implement with the existing design system where available.
Verify in a real browser or rendered output when the task changes visible UI.

Product Principles

Prefer clear hierarchy over decoration.
Make high-frequency tools compact and scannable.
Keep controls predictable and stateful.
Disabled controls should explain their dependency when possible.
Do not introduce a second visual system unless the project requires it.

Do Not

Ship UI based only on compilation.
Add decorative surfaces that do not support the workflow.
Hide unavailable actions when disabled-with-explanation is clearer.
Ignore responsive text fitting and layout overlap.