This Is More Than Just One Guide
11 courses and 26 free guides on AI automation for business — and beyond.
A design kit for Claude Code and Codex: what to keep from a 15-repo prompt
Interfaces built by an agent often look the same: a purple gradient, three cards, the same font. A post on X offers one prompt to fix that. We checked every repository and built a version where the skills don't argue.
What's inside
free, in fullWhat's inside one prompt
repositories installed by one prompt
skills, component libraries and Figma MCPstars on the biggest and the least known
anthropics/skills and lucian-uxui, as of 16.10.2026skills from just two repositories
taste-skill and design-taste, if you install them wholeWho does what
A skill is a folder of instructions the agent loads when a task matches its description. The prompt installs nine of these repositories globally. The ninth, lucian-uxui, pulls ready-made elements from its author's website over the network, and had 7 stars when we checked.
Anthropic's skill: first understand who the product is for, then pick the font, palette and grid for that theme rather than out of habit.
One skill, 24 commands: audit, critique, polish. Before handoff it checks the page for the typical signs of AI-made layout.
Animation and transitions: which curves, durations and origins to use so motion doesn't look cheap.
Art direction for landing pages and websites. The repository has 12 skills, and the default install command adds all of them.
A searchable reference of styles, palettes and font pairings. Search needs Python 3.
Ready-made design systems in the spirit of Linear, Stripe and Vercel for shadcn/ui.
A design agent with an infinite canvas. It works through its own CLI and a login to the service.
24 skills against the template look: from a general one to narrow styles like brutalism and quiet luxury.
What not to install globally
Here the prompt's author is right: component libraries go into a specific project when it needs them. The agent only has to know they exist.
arc-library
React components and blocks with animation built in, installed with the shadcn CLI.
motion-primitives
Motion components built on Motion and Tailwind CSS. The project is in beta: components and code still change noticeably.
canvas-ui
WebGL effects on top of the page: liquid, 3D objects. Some effects need a flag in Chrome.
paper-design/shaders
Live shader gradient backgrounds, installed from npm for React or a plain page. The authors ask you to pin the version: breaking changes are still coming.
ui-layouts
Creative Tailwind and Motion blocks for when you need an unusual section rather than a template.
Figma-Context-MCP
Lets the agent read a design from a Figma link. It won't work without a personal Figma token.
Where the prompt argues with itself
The last line of its routing says: one taste skill at a time, never mix styles. Yet it installs at least five skills globally, and each of them wants to pick the design direction itself. The agent sees all of them in every session and decides on its own which one to listen to. So we install a core of three skills with different roles and add the rest per task.
Install the core and write the routing
Three prompts, in order. They work in both Claude Code and Codex: the agent figures out which one it is and where to put the files.
01.Install the core
Three skills with different roles: choosing a direction, animation, checking before handoff.
Install a design kit into this agent. First work out who you are: Claude Code (rules file ~/.claude/CLAUDE.md) or Codex (rules file ~/.codex/AGENTS.md).
Install only three repositories globally, each following its official README:
1. anthropics/skills, only the frontend-design skill
2. emilkowalski/skills
3. pbakaus/impeccable
If the README only has a Claude Code plugin command and you are Codex, use npx skills add or copy the files by hand into the folder the README names.
Do not install anything that needs an account, a token or a login: list those steps separately and ask me.
At the end, show a table: what got installed, what didn't and why, and which folder the files went into.02.Routing section
A rule for which skill handles which task. Without it the installed skills argue.
Add a section called "Design: which skill when" to the rules file. Only mention skills that are actually installed, skip the rest.
- New interface: frontend-design first. Pick one direction and name it in words before the first line of code.
- Existing interface: don't change the style, use the project's colours, fonts and components.
- Animations and transitions: the emilkowalski skills.
- Components and effects: only from libraries the project already has. Suggest a new library, don't install it.
- Given a Figma link: Figma MCP, if it is connected.
- Before handing off: check with impeccable and fix what it finds.
- One taste skill per task, don't mix styles.
Show me the full section before writing it to the file.03.Audit what's already installed
If you've already run the original prompt in full, start here.
List every installed skill that deals with interface design: name, folder, source repository. Flag the pairs that give conflicting advice on style, fonts, colours or animation. Suggest what to remove or disable so that each task is left with one skill. Don't delete anything, answer with a table.Install commands change between versions: if the agent says a command isn't found, ask it to read the README again.
Before installing and after
Prepare in advance
- Node.js: most of the skills install through npx
- For taste-skill: Node 22+ and an installed Chrome, Edge or Chromium
- For Figma MCP: a personal Figma token, otherwise skip this item
- For superdesign: an account on the service's site and a login through its CLI
- In Codex the impeccable hook is project-local: open /hooks and approve it in each project
Check afterwards
- The agent showed the install table, and it has no silent failures
- The files are where your agent looks for them: for Codex, different repositories name different folders
- The routing section is written to the rules file, not left in the chat
- On a test page the agent named one design direction before writing code
Your own design kit in an evening
What to do, step by step. How exactly is up to you and your agent.
01.Baseline without skills
Ask the agent to build one page as is and save the result: you'll compare against it.
Where the kit won't help
- 01
A skill gives the agent rules, but it doesn't know your product. Without a clear brief about the audience and the page's job, taste won't appear.
- 02
If the project already has a design system, style-picking skills will get in its way: keep only animation and the check.
- 03
Stars are no guarantee of quality: some of the prompt's repositories are very young, so read their instructions before installing.
- 04
The component libraries are mostly for React and Tailwind. On a different stack you'll have to port them by hand.
Mastering Claude Code: From Zero to Power User
The Claude Code course covers skills, the rules file, hooks and MCP on real projects: how to install them, how to check them and when to remove them.
About the source
The original prompt was posted on X by codila on 15.10.2026, linked at the top of the page. We checked every repository against its README, but versions, install commands and star counts change: the data is as of 16.10.2026, so check the current state before installing.
The prompt postGo the whole way
The guide gives you a direction. The courses take you from the first prompt to a working result: agents, automation and working in Claude Code.
Comments