Apple-style UI component technical drawings and architecture

Use the dedicated dimensional-drawing skill to instruct AI to render Apple-style single-page technical drawings showcasing component architectures such as paddings, gaps, border radii, hierarchies, and viewport positions. Ensure precise UI structure representation through rules like monochrome styling, variable substitution, and prohibiting fabricated values.

GitHubenesozturk1.7k

Claude CodeCursorPlaywrightffmpegskills CLI

Added 2026-10-31 · originally published 2026-10-24

Key points

Maintain a monochrome look: use only grayscale, distinguishing different elements through line weights, dashed lines, and fill patterns.
Focus on architecture over content: use structured labels (such as TITLE SLOT · FLEX, CONTENT SLOT · FILL) and intentionally strip away copy text and specific content.
Use variables instead of absolute numbers: use variable expressions such as S1, R2, H1 = 2·S1 + H3.
Never invent values: unknown data or undetermined figures must be marked as [TBD].
Keep names neutral: use unbranded neutral identifiers such as UI-CARD-001.

Pitfalls

Filling in real text content in the drawing, causing distortion when copy changes
Fabricating unknown dimensions and values out of thin air

.cursorrules

- Use monochrome styling, applying only grayscale and distinguishing elements through line widths, dashed lines, and grids
- Focus on component architecture rather than specific copywriting content
- Strictly use variables (such as S1, R2) to express dimensional relationships; strictly forbid inventing or guessing numbers, and mark unknown values as [TBD]
- Use neutral naming (such as UI-CARD-001)

Copy-ready prompt

Please reference the style of the dimensional-drawing skill to create an Apple-style UI component technical drawing for [enter component path, e.g., src/components/Card.tsx]. Requirements: Use a monochrome grayscale presentation, showcase the architecture rather than specific content text, use variables instead of concrete numbers, strictly forbid fabricating unknown values (mark unknown items as [TBD]), and include paddings, gaps, border radii, hierarchies, and viewport positions in the drawing.

View original post

#AI Frontend Design#UI Drawings#Component Architecture#Cursor Rules

Remove that AI-generated look from frontend interfaces with unslop

Fix typical AI-generated UI flaws such as purple gradients, glows, emoji labels, loud copy, and uneven spacing by using the unslop skill for step-by-step audits and multi-round refinement, transforming generic outputs into interfaces with real character.

View screenshots and recordings directly in the terminal with Claude Code

An open-source plugin built for Claude Code displays webpage screenshots, Playwright recordings, and side-by-side QA comparison videos right inside the terminal, eliminating the tedious step of manually switching to the browser to refresh.

Using the open-source Impeccable project to fix AI's poor aesthetic sense

For the problem of cheap-looking, poor-aesthetic AI-generated web pages, you can use the open-source Impeccable project to add UI design capability to programming agents like Claude Code and Cursor. It provides 24 commands plus a critique feature to refine designs and review issues.

Found this useful? Get daily updates on Telegram or X.

Join on Telegram Follow @CaiXiang23766

Summarized by AI from the original source - refer to the original post for details. Copyright belongs to the original author.

Key points

Pitfalls

Related techniques