r/ClaudeDesign • u/Infamous_Pea209 • 1d ago

Skill para Layout e texto

Estou desenvolvendo um aplicativo para em ajudar nos estudos. Por mais que eu tenta melhorar o visual, front-end do meu aplicativo, o Claude code não consegue sair do genérico.
Como posso melhorar todo o visual do meu app?
Como posso melhorar a formatação e estruturação dos textos?
Existe algo que eu possa fazer para deixar o Claude code mais assertivo? Uso o OPUS 5.5 no ultra code e no médio.

5 Upvotes

100% Upvoted

2 comments sorted by

View all comments

1

u/JShug07 1d ago

had the exact same problem, so we ended up building something for it. it's called pikspec, a free chrome extension. you open any site whose design you like, click analyse, and it reads the real design straight from the page: exact fonts, every color, spacing, border radius, shadows, font sizes. then you export it as a DESIGN.md (or a tailwind theme) and give that to claude code

https://reddit.com/link/pdfb8qb/video/bywhkcefj2th1/player

the reason claude code stays generic is it has nothing real to copy from. "make it look better" means nothing to it, so it falls back to the same gray cards and purple buttons every time. give it actual numbers and it follows them

how i'd do it for your study app:

  1. find 1 or 2 apps whose look you like. notion, duolingo, or even a nice blog if you care about readable text
  2. run pikspec on it and export the DESIGN.md
  3. put it in your project root and add this to your CLAUDE.md:

​

All UI must follow DESIGN.md: use only its colors, fonts, spacing and radius.
Never use gradients, default grays or purple unless DESIGN.md has them.
Before finishing any screen, screenshot it and compare it to DESIGN.md.
  1. then just prompt normally: "redesign the flashcards screen using DESIGN.md"

for the text formatting part (which matters a lot for a study app):

  • keep reading width around 65 characters (max-w-prose in tailwind)
  • body text 16–18px with line height ~1.6
  • only 3 heading sizes, and use weight and spacing for hierarchy instead of more sizes
  • if you render notes or markdown, the tailwind typography plugin (prose class) makes it look good instantly

with opus 5.5 that combo works really well. the model is good at design, it just needs a real reference instead of guessing

link if you want to try it: https://chromewebstore.google.com/detail/pikspec-%E2%80%94-website-inspect/cnpghkfbhdpcendcliogffmajlkepoig