# Design

> 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.

- **Type:** Skill
- **Install:** `agentstack add skill-sssstwee-tastedistill-design`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [sssstwee](https://agentstack.voostack.com/s/sssstwee)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [sssstwee](https://github.com/sssstwee)
- **Source:** https://github.com/sssstwee/tastedistill/tree/main/plugins/tastedistill/claude-skills/design
- **Website:** https://tastedistill.com/

## Install

```sh
agentstack add skill-sssstwee-tastedistill-design
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

1. Identify the user workflow and the primary decision on the screen.
2. Inspect existing UI patterns, tokens, components, and states before adding new ones.
3. Choose a visual direction in concrete terms, not generic adjectives.
4. Design the required states: empty, loading, error, disabled, selected, hover, focus, and success.
5. Implement with the existing design system where available.
6. 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.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [sssstwee](https://github.com/sssstwee)
- **Source:** [sssstwee/tastedistill](https://github.com/sssstwee/tastedistill)
- **License:** MIT
- **Homepage:** https://tastedistill.com/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-sssstwee-tastedistill-design
- Seller: https://agentstack.voostack.com/s/sssstwee
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.