You open an AI tool, stare at the empty box, and burn a few minutes on one question: how do I even phrase this? Two resources can cut that short, and this post covers both: a huge library of ready-made prompts for pretty much every field, and a set of skills that teach your coding agent to design web interfaces with some taste instead of stamping out the same template over and over. We call the pair the Builder's Vault. Bookmark it. Then actually open it every week.
Part one: prompts.chat, the prompt library that started as a text file
It started on December 5, 2022, just two weeks after ChatGPT launched, under the name "Awesome ChatGPT Prompts". The creator (@f on GitHub) simply wanted one place to keep his own prompts, and because ChatGPT had no conversation history back then, there was nowhere else to put them. Fast-forward, and prompts.chat is the largest open-source prompt library around, with a repository past 140,000 GitHub stars, according to the project page.
What's inside
- Prompts sorted by field: writing, marketing, coding, teaching, data analysis, everyday office work, with the community adding more all the time.
- The "Act as…" style the library made famous. Give the model a clear role and it answers with that role's expertise.
- More than single prompts, too. The home page now shows ready-made routines, like an assistant that replies to your local business reviews or one that triages security reports, and some of them run on a schedule while others fire on an event.
- A free interactive book on prompting, with more than 29 chapters running from the basics through chain-of-thought and few-shot examples all the way to AI agents.
- It plugs into your setup. Run
npx prompts.chat, grab the Claude Code plugin, or point an AI tool at the MCP server so it can read the library directly. - Self-hosting, for a private company library with its own branding and sign-in.
The license
Prompts and data are CC0 (public domain), so there are no conditions and no attribution to worry about, and the site's source code is MIT-licensed. Can you reuse them? Yes. Copy a prompt, rework it and use it in commercial work without asking anyone.
Practical tip: never paste a prompt exactly as you found it. Swap the roles and examples for your company's context, add the output format you want (table, list, JSON), and then save your adapted version in your own library, where the whole team can find it and reuse it.
A good prompt, in four lines
- Role: who is the model supposed to be? (editor, security reviewer, product manager)
- Context: the situation, who it's for, and what you're after.
- Task: the actual job, stated plainly.
- Format and limits: length, tone, language, and anything it must stay away from.
Part two: web design skills, or how to stop your agent from building "the usual AI website"
A skill is just a folder with an instructions file in it, SKILL.md, and the coding agent reads it when the task calls for it and changes its behavior to match. In design, that's often what separates a page that's "fine, but looks like every other page" from one with some personality. Recent comparisons sort skills by job. Pick the one that fills your particular gap, not the one everybody has heard of.
| Job | Skill | What it does |
|---|---|---|
| Set the direction | frontend-design (from Anthropic) | Makes the agent write a design plan before touching code (named colors, typefaces, a layout, one signature element) and bans the overused default fonts. |
| Taste and critique | Impeccable and Taste Skill | Both add design judgment and a vocabulary for critique. Taste Skill comes with three dials: risk, motion and density. |
| Design system | UI/UX Pro Max | Generates a palette, type choices and rules to match what you're building: an app, a dashboard, a landing page. |
| Extract a reference | SkillUI and clone-study | Take apart a site you like and dump its colors, spacing and motion into a file the agent can read. |
| Quality audit | web-design-guidelines and React Best Practices (from Vercel) | Audit your code against 100+ accessibility and UX rules, plus 57 rules for React performance. |
| Visual check | Playwright skills such as webapp-testing | The agent screenshots its own work, then fixes whatever looks wrong to it. |
Which one do you need?
- Output feels generic? Start with frontend-design.
- If the output is good but identical from one project to the next, add a taste skill.
- New project, no design system yet? UI/UX Pro Max.
- Chasing a particular style? Run SkillUI on a site that has it and use its colors and spacing as constraints.
- Shipping to real users: add an accessibility review and a visual check with Playwright.
Here's how the comparison guide installs the direction skill in Claude Code:
/plugin install frontend-design@claude-plugins-officialConfiguration rule: one skill per job. Stack two that fill the same gap and your setup ends up full of contradictory advice. Also, don't install a skill from a source you can't vouch for, since it's a set of instructions your agent will follow and deserves the same careful read you'd give any code.
Putting the two together
Here's the order we'd use: word your request properly with the prompt library, let a design skill rule the look, and finish with a visual check and an accessibility check. Done that way, a vague idea can turn into a considered page in a single session. And if you're building a site or product with AI, list it in the AI agents directory, so people hunting for similar tools can find it.
