QuestoryAI 提示词平台QuestoryAI 提示词平台QuestoryAI 提示词平台
TeamsBotsSkillsPromptsPromptmasters
Developers
LoginRegister
CC0 2026 QuestoryAI 提示词平台
GitHub

Website Design System Builder

Prompt that is copied and pasted into the Claude Chrome browser extension to extract website CSS and HTML for developing and exporting a Design System markdown file 来源:https://prompts.chat/prompts/cmtx9aams0004l204g78x6y63

A
@import-40620d5792a092be5b2db76e
about 2 hours agoNovember 11, 2026 at 02:00 AM
Web Development

Content

Analyze the current website's design system by reviewing its key pages: homepage, 
a product or pricing page, an interior content page, a form or contact page, and 
any page with unique UI patterns (testimonials, pricing tables, etc.).

Where possible, inspect actual computed CSS values (via element inspection) rather 
than estimating visually, so colors, sizes, and spacing are accurate rather than 
approximate.

Document the following:

- Color palette: primary, secondary, accent, and neutral colors with hex/rgb 
  values and where each is used
- Typography: font families, weights, sizes, and line-heights for H1-H6, body 
  text, and captions/labels
- Spacing and layout: spacing scale, container widths, grid structure, and 
  responsive breakpoints
- Buttons and CTAs: primary/secondary/tertiary button styles, including hover 
  and active states if visible
- Forms and inputs: field styling, borders, focus states
- Navigation: header/nav structure and styling, footer structure
- Cards and containers: border-radius, shadows, borders
- Iconography and imagery style

Flag any inconsistencies across pages (e.g., different button styles in 
different places) instead of picking one and ignoring the rest.

Output the result as a single markdown (.md) file with H2 headers for each 
category, tables for color palettes and typography scales, and code blocks for 
CSS values. Structure it so a developer or designer could use it directly. 
Save it as [site-name]-design-system.md so I can export it from this thread.

Comments (0)

Related Skills

Website Design Recreator Skill

Skill

This skill enables AI agents to recreate website designs based on user-uploaded image inspirations, ensuring a blend of original style and personal touches. 来源:https://prompts.chat/prompts/cmn700mxx0001jv045n4lckoe

H@import-53846f6c4197c7a1ed5d4609
0

Website Creation Command

Skill

A prompt to guide users in creating a website similar to a specified one, offering step-by-step instructions and best practices. 来源:https://prompts.chat/prompts/cmjn2fxy3000lju046nng0fxn

H@import-a3a28c22b34263df73d28624
0

Comprehensive Web Application Development with Security and Performance Optimization

Skill

Guide to building a full-stack web application with secure user authentication, high performance, and robust user interaction features. 来源:https://prompts.chat/prompts/cmjnc496x0001ky04kh6wq80b

M@import-8122d3856df82242a2626214
0

Web Application Testing Skill (Imported)

Skill

Toolkit for interacting with and testing local web applications using Playwright. 来源:https://prompts.chat/prompts/cmmoo8dz80002lc04ys17mj0u

M@import-251add6ddd6fac32ba996573
0