stitch-design-taste
79프리미엄 Google Stitch 디자인 시스템 만들기
일반적인 AI 화면은 종종 일관성이 없어 보이고 다듬기 어렵습니다. 이 스킬은 프로젝트 방향을 Google Stitch, Claude, Codex, Claude Code를 안내하는 구조화된 DESIGN.md로 전환합니다.
모션이 풍부한 프론트엔드 페이지 만들기
일반적인 AI 생성 페이지는 약한 레이아웃을 반복하는 경우가 많습니다. 이 스킬은 Claude, Codex, Claude Code가 다양한 에디토리얼 UI, GSAP 모션, 더 엄격한 시각적 검사를 따르도록 안내합니다.
이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.
Review the Skillstore skill "gpt-taste" from https://skillstore.io/skills/leonxlnx-gpt-taste.md and its manifest at https://skillstore.io/api/skills/leonxlnx-gpt-taste/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.
AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.
"gpt-taste" 사용 중입니다. 한 SaaS 창업자가 분석 제품 출시 페이지를 요청합니다.
예상 결과:
이 스킬은 넓은 히어로, 두 개의 명확한 CTA, 밀도 높은 기능 그리드, 스크롤 모션이 적용된 고정형 증명 섹션을 지시합니다.
"gpt-taste" 사용 중입니다. 한 프론트엔드 엔지니어가 포트폴리오 페이지에 더 강한 모션을 원합니다.
예상 결과:
이 스킬은 이미지 스케일 리빌, 호버 변형, 간격, 버튼 대비, 그리드 밀도를 확인하는 사전 점검 계획을 권장합니다.
"gpt-taste" 사용 중입니다. 한 디자이너가 일반적인 AI 레이아웃 선택을 줄이고 싶어 합니다.
예상 결과:
이 스킬은 어시스턴트가 UI를 작성하기 전에 결정론적 레이아웃 변형, 글꼴 선택, 컴포넌트 선택을 강제합니다.
Most external-command alerts are false positives caused by Markdown inline code in design instructions, not executable backtick usage. One low-severity network issue is confirmed because SKILL.md directs generated UIs to load images from picsum.photos. No prompt injection text or data exfiltration intent was found.
이 스킬에 대해 예상될 수 있는 실제 로컬 기능이므로 검토가 필요하지만, 확인된 악의적 동작으로는 집계되지 않습니다.
버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.
https://skillstore.io/skills/leonxlnx-gpt-taste/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/leonxlnx-gpt-taste?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/leonxlnx-gpt-taste?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/leonxlnx-gpt-taste/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/leonxlnx-gpt-taste.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>leonxlnx. (2026). gpt-taste security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/leonxlnx-gpt-taste/audits/6@techreport{leonxlnx-leonxlnx-gpt-taste-2026,
author = {leonxlnx},
title = {gpt-taste security audit report (audit version 6)},
institution = {Skillstore},
year = {2026},
number = {6},
url = {https://skillstore.io/skills/leonxlnx-gpt-taste/audits/6},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "gpt-taste security audit report (audit version 6)"
version: "unspecified"
type: report
authors:
- name: "leonxlnx"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/leonxlnx-gpt-taste/audits/6"
identifiers:
- type: other
value: "skillstore:leonxlnx-gpt-taste:audit:6"
description: "Skillstore immutable audit report identifier"
강력한 히어로 타이포그래피, 명확한 AIDA 흐름, 모션 방향성을 갖춘 세련된 랜딩 페이지 브리프를 만듭니다.
제품 콘셉트를 CTA, 벤토 섹션, 애니메이션이 적용된 근거 포인트가 포함된 프리미엄 React 페이지 계획으로 전환합니다.
리뷰용 프로토타입을 위해 ScrollTrigger 섹션, 호버 상태, 이미지 리빌 구현을 안내합니다.
gpt-taste를 사용해 [product]를 위한 단일 페이지 React 랜딩 페이지를 디자인하세요. 내비게이션, 히어로, 기능 섹션, 모션 섹션, 푸터를 포함하세요.
[brand]에 대한 현재 페이지 방향을 검토하세요. 넓은 히어로 규칙, 버튼 대비 검사, 빈틈없는 벤토 그리드 가이드를 적용하세요.
[page type]을 위한 인터랙션 계획을 설계하세요. 두 가지 GSAP 스크롤 패턴을 선택하고 이것이 AIDA 섹션을 어떻게 지원하는지 설명하세요.
[project] 코드 생성 전에 결정론적 레이아웃 선택, 그리드 밀도 검사, 대비 검사를 포함한 디자인 계획을 작성하세요.
작성자
leonxlnx라이선스
MIT
Skillstore 리비전
r1
버전 안내
작성자가 버전을 선언하지 않았습니다.
참조
0519034dad657fb1f7706e0550e962beeda73fdf
유지보수 최신성
2026. 7. 18.
사용량
11 다운로드 · 53 조회
파일 구조
📄 SKILL.md
프리미엄 Google Stitch 디자인 시스템 만들기
일반적인 AI 화면은 종종 일관성이 없어 보이고 다듬기 어렵습니다. 이 스킬은 프로젝트 방향을 Google Stitch, Claude, Codex, Claude Code를 안내하는 구조화된 DESIGN.md로 전환합니다.
완성도 높은 프론트엔드 인터페이스 구축
AI가 생성한 인터페이스는 종종 일반적으로 보이거나 프로덕션 세부 사항을 놓칩니다. 이 스킬은 Claude, Codex, Claude Code에 엄격한 디자인 및 프론트엔드 가드레일을 제공합니다.
프론트엔드 디자인 감각 개선
AI가 생성한 프론트엔드 작업은 일반적으로 보이거나 반응형 상태를 놓칠 수 있습니다. 이 스킬은 Claude, Codex, Claude Code가 더 선명한 React 및 Tailwind 결과물을 만들 수 있도록 명확한 UI 규칙을 제공합니다.
프리미엄 비주얼 인터페이스 만들기
일반적인 AI 레이아웃은 종종 평면적이고 템플릿 기반처럼 보입니다. 이 스킬은 Claude, Codex, Claude Code가 프리미엄 비주얼 시스템, 모션 규칙, 반응형 UI 완성도를 갖추도록 안내합니다.
기존 웹 프로젝트 재디자인
기존 앱은 종종 일반적이거나, 일관성이 없거나, 미완성처럼 느껴집니다. 이 skill은 인터페이스를 감사하고 핵심 스택을 변경하지 않으면서 집중적인 시각적 개선을 적용합니다.
미니멀리스트 에디토리얼 인터페이스 디자인
일반적인 AI 생성 인터페이스는 종종 복잡하거나, 번들거리거나, 일관성이 없어 보입니다. 이 스킬은 Claude, Codex, Claude Code가 차분한 에디토리얼 레이아웃을 만들 수 있도록 정밀한 시각 규칙을 제공합니다.
목적 있는 UI 애니메이션 추가
작성자 pbakaus
정적인 인터페이스는 상태 변경 중에 갑작스럽고 불명확하게 느껴질 수 있습니다. 이 스킬은 Claude, Codex, Claude Code가 사용성을 개선하는 지점에 접근 가능하고 성능이 좋은 모션을 추가하도록 안내합니다.
Create a Polished Launch Video
작성자 latent-spaces
Turning a project into a concise launch video requires product analysis, scripting, animation, audio, and rendering. Brag coordinates that workflow with Hyperframes and delivers a video, poster, storyboard, and share copy.
차별화된 랜딩 페이지 디자인
작성자 2389-research
일반적인 랜딩 페이지는 신뢰나 관심을 얻지 못합니다. 이 스킬은 Claude, Codex, Claude Code가 탐색, 구조화, 시각적 방향성, 애니메이션, 전환 중심의 마무리 작업을 진행하도록 안내합니다.
프로젝트 디자인 컨텍스트 캡처
작성자 pbakaus
AI 디자인 작업은 세션이 바뀌면 프로젝트 컨텍스트를 잃는 경우가 많습니다. 이 skill은 증거를 수집하고 Claude, Codex, Claude Code를 위한 재사용 가능한 지침을 저장합니다.
차별화된 프론트엔드 인터페이스 설계
작성자 Byunk
일반적인 인터페이스는 제품을 서로 구별하기 어렵게 만들 수 있습니다. 이 스킬은 Claude, Codex, Claude Code가 구체적인 시각적 방향, 완성도 높은 코드, 검증을 지향하도록 안내합니다.
접근성 높은 시각적 경험 구축
작성자 CleanExpo
시각적 경험은 페이지 전반에서 일관성이 떨어지거나 느려지거나 접근성이 낮아질 수 있습니다. 이 스킬은 명확한 안전 제약 조건과 함께 애니메이션, 갤러리, 데모, Three.js 업데이트를 안내합니다.