Skip to content
AI Primer
workflow

Designers release reusable prompt templates for AI front-end agents

Shared resources included design-skills repos, a UI visual dictionary, CRM table tokens, and Claude Opus 5 website prompts. The reusable context can speed front-end generation but does not replace product-specific design choices.

6 min read
Designers release reusable prompt templates for AI front-end agents
Designers release reusable prompt templates for AI front-end agents

TL;DR

Anthropic's Claude skills docs define a skill as a SKILL.md file Claude can invoke as /skill-name, and its context-engineering post says prompts now sit beside Skills, CLAUDE.md, memory, and system prompts. The cinematic-scroll-prompt-kit ships PROMPT.txt, a project brief template, and an asset manifest. Amicro gives React agents a shelf of Motion interactions to copy from, while Leva is the live-control panel behind one of the cleaner variation workflows.

Promptable UI pieces

Amicro is a React and Motion library covering buttons, cards, loaders, animations, and 3D carousels. MengTo's useful twist was not the component list, it was the usage pattern: copy a component into the prompt and let the agent recreate the interaction.

AdhamDannaway's UI dictionary lowers a different kind of friction: naming. The screenshot includes common elements a designer might describe imprecisely:

  • Parallax Scrolling, Date Picker, Pagination
  • Sign-in Form, Carousel, Site Header vs. Navigation Bar
  • Card, Resize Handle, Insertion Caret
  • Hamburger Menu, Bento Grid, Masonry Layout

A CRM table kit from _heyrico went straight to tokens: Booton TRIAL type, 36px table cells, 12px checkboxes, 22px tags, 7px radius, and neutral text colors from #525252 through #A1A1A1.

AdhamDannaway also pointed designers toward AI Goodies, a curated AI and UX education hub, while _heyrico linked Ace Studio's work as a design-culture reference for AI-native product teams.

Skills as taste files

Anthropic's Claude Code skills documentation says custom commands have merged into skills: .claude/commands/deploy.md and .claude/skills/deploy/SKILL.md both create /deploy, while skills add supporting files and frontmatter. Anthropic's context-engineering post says it removed over 80% of Claude Code's system prompt for newer models, which pushed more responsibility into skills, CLAUDE.md, and memory.

The Matt Pocock bundle, as mapped by shannholmberg, is a whole software workflow in slash commands:

  • Interview: /grill-me, /grilling, /grill-with-docs
  • Domain and design: /domain-modeling, /codebase-design, /improve-codebase-architecture
  • Spec and plan: /to-spec, /to-tickets, /wayfinder, /triage
  • Build: /implement, /tdd, /prototype, /research
  • Review and fix: /code-review, /diagnosing-bugs, /resolving-merge-conflicts
  • Workflow: /ask-matt, /handoff, /teach, /writing-great-skills, /setup-matt-pocock-skills

Jakub Krehel's /better collection moved the same pattern into interface critique. His new additions were /better-accessibility, /better-layout, /better-writing, and /better-interface, bringing the collection to seven skills installable with npx skills add jakubkrehel/skills.

Aakash Gupta framed the product-side version as reusable standards: his style-guide post said teams could stop re-pasting standards into every prompt and have the system apply the right ones on each build. In a later demo, Gupta's prompt-tool-skill comparison defined the split cleanly: a prompt is a one-off instruction, a tool lets the agent act outside itself, and a skill preserves reusable know-how.

Variation switchers

Emil Kowalski's prototype workflow asked a coding agent to generate several variants of a feature, add a browser switcher, and persist the selected variant as a query param. The same demo used Leva controls to tune an interaction live, matching the Leva repository, which describes itself as a React-first GUI built around declarative controls.

Kowalski said in a reply that he used his own skill for the workflow. The emilkowalski/skills repo calls the collection "Skills For Design Engineers" and frames it around animation judgment, interface review, and faster UI decisions.

Cinematic prompt kits

AmirMushich's repo is a reusable contract for scroll-driven 2.5D websites. The GitHub README lists three core files: PROMPT.txt, PROJECT_BRIEF.example.md, and assets.example.json.

The Moda MCP demo pushed the same idea into motion design: one prompt, about five minutes, editable layers, keyframes, and visible detail controls. In a reply, AmirMushich argued that the editable motion canvas, not just the generated video, was the powerful part.

viktoroddy's side of the wave was prompt distribution for cinematic websites. His Claude Code plus Fable 5 tutorial showed a long screen recording of cinematic landing-page builds, his Opus 5 design post attached more recent website prompts, and his follow-up pointed to an unlimited prompt library.

He also claimed in a pricing note that Opus 5 was the same price as Opus 4.8, framing it as immediate fuel for cinematic site generation.

Browser 3D prompts

MengTo open sourced Three.js game-dev skills for an isometric action RPG, including camera controls, VFX, audio, monster assets, combat systems, a playable build, and assets. A follow-up from MengTo said the prompt and source code were both shared for another Opus 5 game demo, turning the artifact into something other builders could study.

chrisfirst's V8 prompt asked for a self-contained Three.js file with a mechanically accurate 90-degree V8, exact slider-crank geometry, 112 clickable parts, live gauges, view modes, and verification checks. The prompt itself, shown in chrisfirst's full prompt, specified cam timing, firing order, valve lift, piston motion, part telemetry, and no TODO stubs.

LLMJunky claimed Opus 5 built a Rocket League-style browser game while consuming 27% of a 5x Max subscription. The playable and downloadable versions were posted in replies from LLMJunky and LLMJunky's download reply, and the starting-prompt reply listed follow-up edits: practice mode, infinite boost, tighter steering, reversed controls, audio, rounded ceiling corners, and rounded goals.

A second chrisfirst demo used one short prompt for a Roman Colosseum arcade game: browser-based 3D, HTML and Three.js, a Roman fighting a lion, takeover on death, and high-quality graphics and animations, according to the prompt reply.

Brand .md files

A potential client asked 0xCharlota whether a brand identity could become a .md file for Claude. She said yes for basics: type, color, logo, and patterns.

Her constraint was concrete: a brand identity built against no real touchpoint avoids the hard decisions. Real headlines, hierarchy, and visual assets force layout, spacing, density, imagery, illustration, motion, and data-viz rules to become testable.

In replies, 0xCharlota said she was experimenting with the .md file as a deliverable, and another reply said her minimal identity package already includes at least social templates or a presentation template.

Further reading

Discussion across the web

Where this story is being discussed, in original context.

On X· 6 threads
Promptable UI pieces2 posts
Skills as taste files2 posts
Variation switchers1 post
Cinematic prompt kits4 posts
Browser 3D prompts6 posts
Brand .md files2 posts
Share on X