본문으로 건너뛰기
cccskills
무료GitHub에 공개

ui-design

Use this to design a nice UI in single html as inspiration & UI exploration.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(1)

  • SKILL.md1.9 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

shajith003/awesome-claude-skills252026년 10월 13일 업데이트

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

shajith003/awesome-claude-skills252026년 10월 13일 업데이트

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

shajith003/awesome-claude-skills252026년 10월 13일 업데이트

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

shajith003/awesome-claude-skills252026년 10월 13일 업데이트

docx

무료

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

shajith003/awesome-claude-skills252026년 10월 13일 업데이트

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.).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

shajith003/awesome-claude-skills252026년 10월 13일 업데이트

shajith003의 스킬 모두 보기

이 스킬의 문제 신고