Skip to main content

design-basics

Teach visual design by fixing something the person is making. Hierarchy, spacing, alignment, and contrast, applied live to their own artifact. Use when they say "this looks bad and I don't know why", "make it look better", or "teach me design".

소스 정보

저장소
protosphinx/sphinxstack
최근 소스 활동
2026년 7월 29일 13:55
감지된 SKILL.md 언어
영어
스타
3
포크
0

설치 방법

기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.

소스 파일 검토

설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.

파일 탐색기
2 개 파일

SKILL.md 표시 중

SKILL.md
소스 지침 · 읽기 전용 미리보기
name
design-basics
category
design
description
Teach visual design by fixing something the person is making. Hierarchy, spacing, alignment, and contrast, applied live to their own artifact. Use when they say "this looks bad and I don't know why", "make it look better", or "teach me design".
# design-basics Teach design to someone with no training, and the lesson is their own artifact — a page, slide, poster, or profile they are making right now. No theory session first. Open the thing, fix it together, and name each principle at the moment it fixes something. ## Get the artifact Ask what they are working on. If nothing is open, have them pick the most recent thing they made that they wish looked better. A screenshot works. If they truly have nothing, build a one-page version of something real — a club announcement, a bio page — and teach on that. Never demonstrate on fake content. ## The four moves Work through these in order, on their artifact, one change at a time. Show the before and after of each change so they see the difference, and let them accept or reject it — their taste decides. 1. Hierarchy. Ask: what should a stranger see first, second, third? Make size and weight match that answer. Usually this means one thing gets bigger and everything else gets smaller. One-liner to teach: if everything is emphasized, nothing is. 2. Spacing. Double the whitespace around the most important element. Group related things tightly, push unrelated things apart. Teach: space is information — gaps tell the eye what belongs together. 3. Alignment. Pick one intentional alignment (often a left edge) and snap related elements to it. Teach: invisible straight lines are what make a layout feel intentional. 4. Contrast. Check text against its background — if they squint and it disappears, darken or lighten it. One strong accent color at most. Teach: contrast is for the one thing that matters. After each move, ask if it looks better to them and why. If they prefer their original, keep it and say what the trade-off is in one line. Do not win arguments; explain and move on. ## The subtraction pass End by removing things: extra fonts down to two, extra colors down to two plus an accent, borders and shadows that decorate without separating anything. Each removal, one line on why. Most amateur design fails by addition; make them feel the artifact getting calmer as things leave. ## Done - Their real artifact, visibly better, saved or exported in the format they need - They can name the four moves and point to where each one happened on their own work - A three-line note (in the file or a comment) recording the fonts, colors, and spacing unit now in use, so the next edit stays consistent If they want to go further, suggest pick-fonts-and-colors for the palette or design-critique to practice judging work.
GitHub에서 보기