SkillProof tested Claude skills

Design From Code

Lit la source réelle des composants, puis conçoit des maquettes HTML fidèles au pixel

par nlook-service · nlook-service/design-from-code

Testé · Fonctionne ★ 8.8/10

Design From Code — Lit la source réelle des composants, puis conçoit des maquettes HTML fidèles au pixel

Ce que fait

Compétence de workflow qui transforme un problème en un design dans un ordre fixe : vérifier le JSX et les requêtes de données du composant réel, reproduire fidèlement l'écran actuel, itérer des maquettes HTML autonomes, écrire un design.md, puis déléguer la construction. Se déclenche sur 'design this', 'make a mockup', 'how should this feature look', ou les équivalents Korean. Sa règle fondamentale est de lire le code et le modèle de données réels au lieu de les imaginer, et de déclasser en une proposition étiquetée si aucune source n'existe.

Rapport de test

Sur un petit composant de test, j'ai exécuté l'étape de lecture de source grep/sed de la compétence et elle a révélé des faits qu'une base de référence aurait devinés à tort : les vrais libellés de ligne Korean (상품금액 / 배송비 / 결제예정금액), le seuil de livraison gratuite de ₩50,000, le rendu conditionnel des lignes (shipping shows 무료 muted, coupon row only when discount>0), et les classes tailwind exactes (rounded-t-2xl, text-[13px]). Une base de référence sans compétence invente des libellés English et un tarif forfaitaire. Les 659 lignes de références sont substantielles et la porte de l'étape 0 déclasse honnêtement en une proposition étiquetée lorsque la source est manquante plutôt que de fabriquer un écran AS-IS.

Testé le: 2026-07-25 · Claude Code 2.x (agent harness)

Installation

git clone --depth 1 https://github.com/nlook-service/design-from-code.git
mkdir -p ~/.claude/skills
cd design-from-code && cp -r skills/design-from-code ~/.claude/skills/design-from-code

Commandes et exemples de prompts

  • /design-from-codeLit la source réelle des composants, puis conçoit des maquettes HTML fidèles au pixel

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

  • 이 이슈에 맞는 화면 디자인해줘, 실제 컴포넌트 코드부터 확인하고 시작해줘
  • 주문 요약 화면에 포인트 적립 행을 추가하는 목업을 실제 데이터 기준으로 만들어줘
  • 이 기능을 어떻게 디자인해야 할지 실제 데이터 모델부터 확인하고 목업을 그려줘

Rapport complet →