pastiche

Pastiche is a Claude Code plugin for Frontend UI implementation. Given a frontend task, it produces code that follows your established design system and component library — not by inventing, but by faithfully executing within the vocabulary your team already ships.

Quickstart

Install the plugin from this repository's marketplace:

/plugin marketplace add retz8/pastiche
/plugin install pastiche@pastiche-marketplace

Then, from the root of your frontend project, Claude Code session:

/pastiche-init      # scaffold pastiche/ docs and extract your component catalog
/pastiche-setup     # interactive walkthrough to teach pastiche your design system
/pastiche <task>    # run a frontend task through the gated loop

How it works

Coding agents keep failing at producing consistent UI. To fix that, teams started encoding their design system into a single document an agent could read. Google's DESIGN.md is the clearest example, capturing tokens and visual patterns well enough for an agent to generate coherent-looking screens.

But DESIGN.md stops at the surface. It produces a good-looking prototype, not a working feature because it's missing the golden pieces: the component library the team actually ships, and the business logic behind the UI that can't be reduced to tokens and patterns.

Pastiche keeps DESIGN.md's insight and splits it across three documents, each inheriting one piece of the problem:

Three Docs

Document	Layer	What it captures
FACT.md	What exists	The components and CSS tokens available in your codebase. Inherits DESIGN.md directly — auto-extracted, so it's never out of date.
KNOWLEDGE.md	UI/UX mapping	General design know-how connected to your library, as a mapping from scenario to atom — "in this situation, use these components and these tokens." Curated by humans.
WISDOM.md	Rules & logic	The business logic behind the UI that can't be codified — both general rules and component-specific ones. Curated by humans.

Executing Task

At runtime, pastiche runs a bounded doubt-defense loop — depth comes from the dialogue between agents, not from a heavyweight reviewer:

flowchart LR
    R1["<strong>implementer · round 1</strong><br/>writes code against FACT/KNOWLEDGE/WISDOM"]
    REV["<strong>reviewer</strong><br/>raises strict doubts"]
    R2["<strong>implementer · round 2</strong><br/>corrects or defends each doubt"]
    R1 --> REV --> R2

Loading

A System That Grows

FACT.md is regenerated on every codebase change and always reflects what exists. KNOWLEDGE.md and WISDOM.md are different: they are living documents, curated and extended by your team over time.

When you run /pastiche on a task, it reports the gaps it hit along the way such as scenarios missing from KNOWLEDGE.md, rules missing from WISDOM.md. You fold them back in and the next run is sharper. The more your team uses pastiche, the richer these documents become. And the richer they become, the better and more consistent its output gets.

Shared Across the Org

The pastiche/ folder isn't tied to one repo. KNOWLEDGE.md and WISDOM.md are an abstraction of your design system and brand, not of any single codebase — so they travel. Share one pastiche/ folder across teams and every team produces UI in the same voice while building entirely different products.

Picture one company with several product teams — an energy app, a vehicle dashboard, a robotics console. Different domains, different repos, same pastiche/ folder, and every team's output stays on-brand and consistent. The design system is authored once and executed faithfully everywhere.

For the full philosophy, the metaphor, the implementer/reviewer asymmetry, and the loop economics — see spec.md.

The workflow

1. /pastiche-init (run once, right after installing the plugin) — scaffolds pastiche/{config.yaml, FACT.md, KNOWLEDGE.md, WISDOM.md} and runs the extractor to populate FACT.md from your components and tokens.
2. /pastiche-setup — an interactive session that fills KNOWLEDGE.md (scenario mappings, brand identity) and seeds WISDOM.md with general rules.
3. /pastiche — runs the doubt-defense loop on a frontend task and produces design-system-faithful code.
4. Maintain over time — re-extract with /pastiche-sync after codebase changes, and extend your design knowledge with /pastiche-write-knowledge and /pastiche-write-wisdom as new scenarios appear.

Already have a DESIGN.md? Setup goes much faster. If a DESIGN.md sits at your repo root, /pastiche-setup offers to use it as a reference — mining its narrative into KNOWLEDGE.md scenarios and WISDOM.md rules, and porting its brand/style prose into your Brand Identity. You mostly review drafts instead of writing from scratch. No DESIGN.md? Setup just walks you through each section from the ground up.

What's inside

Skills

Command	What it does
/pastiche	Run a frontend task through the doubt-defense loop
/pastiche-init	Scaffold the three documents and extract FACT.md
/pastiche-setup	Interactive setup: fill KNOWLEDGE.md, seed WISDOM.md
/pastiche-sync	Re-extract FACT.md after codebase changes
/pastiche-lint	Cross-document consistency check
/pastiche-write-knowledge	Add a curated scenario → component mapping
/pastiche-write-wisdom	Add a rule — general or component-specific

Agents

internal — orchestrated by the loop, not called directly

• pastiche-implementer-round1
• pastiche-reviewer
• pastiche-implementer-round2.

Philosophy

A pastiche is a work that openly imitates the style of a master — not a forgery, but a disciplined suppression of personal style in service of fidelity. That is exactly what a frontend implementer must do inside a design system: not invent, not deviate, but execute faithfully within an established vocabulary. In this domain, creativity is often the failure mode.

Read more in spec.md.

Compatibility

	Supported today	Planned
Framework	React (TypeScript / TSX)	Vue, Angular
Component library	Any React + TypeScript library that exposes prop types	Libraries that ship no TypeScript types
Agent platform	Claude Code	Codex, OpenCode, Cursor

Framework — React only, for now. The FACT extractor reads React component types (.ts/.tsx files, XxxProps shapes). It doesn't yet read Vue (defineProps) or Angular (@Input classes).

Component library — not tied to any specific one. Pastiche doesn't hardcode support for individual libraries. It works with anything that exposes TypeScript prop types, whether a typed npm package (MUI, Primer, Mantine, Chakra, Ant Design, …) or shadcn-style source components copied into your repo. See docs/config.md for the ingestion modes and setup.

A Codex adapter already ships as an unverified placeholder; community validation is welcome.

Known limitations

• Lint binary — macOS (Apple Silicon) only, for now. The bundled pastiche-lint is prebuilt for darwin/arm64. On other OS/arch it won't run, so the consistency check is skipped — pastiche still works, but stale tags and missing sections go uncaught. Multi-arch builds are planned.

Contributing

Developing pastiche itself (repo layout, the build, dev scripts) — see CONTRIBUTING.md.

License

MIT © 2026 Jioh In