shot-to-unocss
High-fidelity, section-by-section conversion of segmented design images (page slices, landing/marketing/dashboard mockups) into UnoCSS-styled Vue or Astro page code inside an existing project, with a mandatory pre-implementation brief, asset fulfilment plan and per-section screenshot diff. Use for "UnoCSS로 시안 구현", "디자인 이미지를 Vue/Astro 페이지로", "섹션별 고충실도 복원", "랜딩 페이지 시안 코드화", "design image to UnoCSS page", "section-driven high fidelity", "pixel-faithful Vue page from mockups".
Pinned to revision cb2330c1f074, so it is the text this page describes rather than whatever the author pushed since.
Files
- skills/shot-to-unocss/SKILL.md
- skills/shot-to-unocss/asset-policy.config.json
- skills/shot-to-unocss/references/brief-template.md
- skills/shot-to-unocss/references/mobile-recomposition.md
- skills/shot-to-unocss/references/section-diff.md
- skills/shot-to-unocss/references/unocss-output.md
- skills/shot-to-unocss/scripts/NOTICE.md
- skills/shot-to-unocss/scripts/asset-policy/asset-record.mjs
- skills/shot-to-unocss/scripts/asset-policy/atlas-utils.mjs
- skills/shot-to-unocss/scripts/asset-policy/constants.mjs
- skills/shot-to-unocss/scripts/asset-policy/crop-atlas.mjs
- skills/shot-to-unocss/scripts/asset-policy/optimize-assets.mjs
- skills/shot-to-unocss/scripts/asset-policy/path-utils.mjs
- skills/shot-to-unocss/scripts/asset-policy/policy-loader.mjs
- skills/shot-to-unocss/scripts/asset-policy/scan-assets.mjs
- skills/shot-to-unocss/scripts/asset-policy/scan-utils.mjs
- skills/shot-to-unocss/scripts/asset-policy/validate-atlas.mjs
Every link opens the file at its source, pinned to the revision this page describes.