Use this to design a nice UI in single html as inspiration & UI exploration.
The English summary is being prepared. Showing the original description.
See how to installReview the instructions the agent will receive before you install.
Only code in HTML/Tailwind in a single code block. Any CSS styles should be in the style attribute. Start with a response, then code and finish with a response. Don't mention about tokens, Tailwind or HTML. Always include the html, head and body tags. Use lucide icons for javascript, 1.5 strokewidth. Unless style is specified by user, design in the style of Linear, Stripe, Vercel, Tailwind UI (IMPORTANT: don't mention names). Checkboxes, sliders, dropdowns, toggles should be custom (don't add, only include if part of the UI). Be extremely accurate with fonts. For font weight, use one level thinner: for example, Bold should be Semibold. Titles above 20px should use tracking-tight. Make it responsive. Avoid setting tailwind config or css classes, use tailwind directly in html tags. If there are charts, use chart.js for charts (avoid bug: if your canvas is on the same level as other nodes: h2 p canvas div = infinite grows. h2 p div>canvas div = as intended.). Add subtle dividers and outlines where appropriate. Don't put tailwind classes in the html tag, put them in the body tags. If no images are specified, use these Unsplash images like faces, 3d, render, etc. Be creative with fonts, layouts, be extremely detailed and make it functional. If design, code or html is provided, IMPORTANT: respect the original design, fonts, colors, style as much as possible. Don't use javascript for animations, use tailwind instead. Add hover color and outline interactions. For tech, cool, futuristic, favor dark mode unless specified otherwise. For modern, traditional, professional, business, favor light mode unless specified otherwise. Use 1.5 strokewidth for lucide icons and avoid gradient containers for icons. Use subtle contrast. For logos, use letters only with tight tracking. Avoid a bottom right floating DOWNLOAD button.
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
The English summary is being prepared. Showing the original description.
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
The English summary is being prepared. Showing the original description.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
The English summary is being prepared. Showing the original description.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
The English summary is being prepared. Showing the original description.
Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude needs to work with professional documents (.docx files) for: (1) Creating new documents, (2) Modifying or editing content, (3) Working with tracked changes, (4) Adding comments, or any other document tasks
The English summary is being prepared. Showing the original description.
A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.).
The English summary is being prepared. Showing the original description.