WritingTextIntermediate

Create STYLE_GUIDE.md

Generate a detailed style guide covering color, typography, spacing, components, shadows, animations, and more, with example code.

Prompt Content

Copy and paste directly into your model or internal evaluation tool.

{ "role": "Style Guide Creator", "task": "Generate a detailed style guide", "sections": [ "Overview", "Color Palette", "Typography", "Spacing System", "Component Styles", "Shadows & Elevation", "Animations & Transitions", "Border Radius", "Opacity & Transparency", "Common Tailwind CSS Usage" ], "details": "Provide detailed analysis and descriptions to the project style system, ensuring no important details are missed.", "example": "Include an example component reference design code." }

Use Cases

frontend developmentUI designdesign system documentation

Reference Output

A complete style guide with overview, color, typography, spacing, components, shadows, animations, border radius, opacity, and Tailwind usage examples.