Communitygithub.com

design-extract

๐ŸŽจ ๋ฒ”์šฉ Agent Skill: ๋Œ€ํ™”ํ˜• picker๋กœ ํฉ์–ด์ง„ ์‹œ๊ฐ์  ์„ ํ˜ธ๋„๋ฅผ ๊ฐœ์ธ ๋ธŒ๋žœ๋“œ ๋””์ž์ธ ์‹œ์Šคํ…œ(design.md + theme.css + preview.html)์œผ๋กœ ์ถ”์ถœํ•ฉ๋‹ˆ๋‹ค. Claude Code / Codex / opencode / pi

design-extract๋ž€ ๋ฌด์—‡์ธ๊ฐ€์š”?

์ด ์Šคํ‚ฌ์€ AI ์—์ด์ „ํŠธ๊ฐ€ ์‚ฌ์šฉ์ž์˜ ์‹œ๊ฐ์  ์„ ํ˜ธ๋„๋ฅผ ๋Œ€ํ™”ํ˜• picker๋ฅผ ํ†ตํ•ด ์ˆ˜์ง‘ํ•˜๊ณ , ์ด๋ฅผ ์ฒด๊ณ„์ ์ธ ๊ฐœ์ธ ๋ธŒ๋žœ๋“œ ๋””์ž์ธ ์‹œ์Šคํ…œ์œผ๋กœ ๋ณ€ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž๋Š” ๋‹ค์–‘ํ•œ ์‹œ๊ฐ์  ์Šคํƒ€์ผ, ์ƒ‰์ƒ, ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ ๋“ฑ์„ ์„ ํƒํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์Šคํ‚ฌ์€ ์ด๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ `design.md` (๋””์ž์ธ ์‹œ์Šคํ…œ ๋ฌธ์„œ), `theme.css` (ํ…Œ๋งˆ ์Šคํƒ€์ผ์‹œํŠธ), `preview.html` (๋ฏธ๋ฆฌ๋ณด๊ธฐ) ํŒŒ์ผ์„ ์ž๋™ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ์ด ์Šคํ‚ฌ์€ Claude Code, Codex, opencode, pi ๋“ฑ ์—ฌ๋Ÿฌ ์ฃผ์š” AI ์—์ด์ „ํŠธ ํ”Œ๋žซํผ์—์„œ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค. ๋””์ž์ธ ์ผ๊ด€์„ฑ์„ ์œ ์ง€ํ•˜๊ณ ์ž ํ•˜๋Š” ๊ฐœ๋ฐœ์ž๋‚˜ ํŒ€์—๊ฒŒ ํŠนํžˆ ์œ ์šฉํ•˜๋ฉฐ, ์ˆ˜๋™ ๋””์ž์ธ ์ž‘์—… ์—†์ด ๋ธŒ๋žœ๋“œ ์‹œ์Šคํ…œ์„ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ง€์› ๋Œ€์ƒโœ“Claude Codeโœ“Codex CLI~Cursorโœ“OpenCode
npx skills add lawrencewzen/design-extract

์ฆ๊ฒจ ์‚ฌ์šฉํ•˜๋Š” AI์—๊ฒŒ ๋ฌผ์–ด๋ณด๊ธฐ

์ด ์—์ด์ „ํŠธ ์Šคํ‚ฌ์ด ๋ฏธ๋ฆฌ ๋กœ๋“œ๋œ ์ƒˆ ์ฑ„ํŒ…์„ ์—ฝ๋‹ˆ๋‹ค.

๋ฌธ์„œ

design-extract์€(๋Š”) ๋ฌด์—‡์„ ํ•˜๋‚˜์š”?

๐ŸŽจ ๋ฒ”์šฉ Agent Skill: ๋Œ€ํ™”ํ˜• picker๋กœ ํฉ์–ด์ง„ ์‹œ๊ฐ์  ์„ ํ˜ธ๋„๋ฅผ ๊ฐœ์ธ ๋ธŒ๋žœ๋“œ ๋””์ž์ธ ์‹œ์Šคํ…œ(design.md + theme.css + preview.html)์œผ๋กœ ์ถ”์ถœํ•ฉ๋‹ˆ๋‹ค. Claude Code / Codex / opencode / pi

๊ด€๋ จ ์Šคํ‚ฌ