Sistema

Plays · 18 single · 2 featured

Ready-to-paste prompts, grounded in real systems.

Featured plays

multi-step plays that cover a complete arc.
featured · 6 steps~24 min

Bootstrap a Design System

Take a new design system from blank canvas to a styled, token-driven foundation in 6 structured steps.

1. positioning-brief2. generate-design-md3. generate-color-scheme4. generate-type-scale5. generate-shape-tokens6. generate-style-dictionary
Open
featured · 5 steps~20 min

Audit and Refactor a Design System

Run a structured health check on an existing design system — surface token drift, flag accessibility gaps, document what's changed, and plan the next iteration.

1. session-start2. audit-token-coverage3. accessibility-audit4. design-system-retrospective5. plan-next-iteration
Open

Single plays

stage 1

System definition

· 2 plays
stage 1

positioning-brief

A DESIGN.md positioning section

planningpositioningfoundations
stage 1

generate-design-md

A full DESIGN.md scaffold

design-mdfoundationsplanning
stage 2

Primitive tokens

· 3 plays
stage 2

generate-color-scheme

19-stop OKLCH palette from seed

tokenscolorsemantic
stage 2

generate-type-scale

Modular type scale w/ leading

tokenstypographyprimitives
stage 2

generate-shape-tokens

Radius + elevation + border set

tokensshapeprimitives
stage 3

Semantic layer

· 3 plays
stage 3

generate-color-roles

Semantic role mapping

tokenscolorsemantic
stage 3

generate-dark-mode

Dark-mode role overrides

tokenscolorsemantic
stage 3

generate-style-dictionary

Style Dictionary v5 source JSON

tokenstoolingbuild
stage 4

Components

· 2 plays
stage 4

specify-component

Component spec (states, anatomy)

componentsspecificationdesign
stage 4

implement-component

React + tokens implementation

componentscodeimplementation
stage 5

Migration and adoption

· 2 plays
stage 5

migrate-tailwind-tokens

Tailwind theme → Style Dict.

migrationtokenscolor
stage 5

audit-component

Component conformance report

auditcomponentscode
stage 6

Stewardship

· 6 plays
stage 6

session-start

Catch-up brief for the agent

stewardshipliving-briefplanning
stage 6

add-component

New component to existing system

stewardshipcomponentsimplementation
stage 6

audit-token-coverage

Hard-coded values report

stewardshipaudittokens
stage 6

accessibility-audit

WCAG 2.2 + APCA findings

stewardshipauditaccessibility
stage 6

design-system-retrospective

What worked, what didn't

stewardshipretrospectiveliving-brief
stage 6

plan-next-iteration

Prioritized backlog for next q.

stewardshipplanningliving-brief