웹·UI 디자인

shadcn/ui와 Tailwind CSS로 접근성 좋은 반응형 인터페이스를 만드는 가이드. 다크 모드, 테마 설정, 캔버스 기반 비주얼 디자인 접근법도 다룹니다.

UI 스타일, 색상 팔레트, 글꼴 조합, UX 가이드라인, 차트, 기술 스택별 팁을 검색할 수 있는 디자인 지식베이스. 구현 전에 시각적 방향을 정할 때 씁니다.

실행 중인 웹사이트의 레이아웃, 반응형, 접근성, 일관성 문제를 점검하고, 최소한의 변경으로 소스 코드를 고친 뒤 다시 확인합니다.

페이지나 컴포넌트를 WCAG 2.2 AA 수준에 맞춰 점검합니다. 키보드, 포커스, 대비, 이름과 레이블, 구조, 폼, 대화상자, 동적 업데이트, 확대, 터치 영역 크기를 다루며 지적마다 해당 성공 기준을 붙입니다.

주제를 생성 예술 선언문으로 쓴 뒤, 시드 전환·파라미터 슬라이더·PNG 내보내기가 있는 p5.js 인터랙티브 작품으로 만들어 줍니다.

Penpot의 MCP 서버를 통해 Penpot 안에서 웹·모바일·데스크톱 인터페이스를 설계합니다. 디자인 시스템 점검, 컴포넌트·접근성 규칙, 플랫폼별 크기를 갖추고 있습니다.

화면이나 컴포넌트에 필요한 모든 상태를 나열합니다. 로딩, 빈 상태, 오류, 부분 성공, 비활성, 오프라인, 권한 없음, 극단적인 내용까지 각 상태에서 사용자가 무엇을 보고 무엇을 할 수 있는지 정합니다.

재설계 없이 어떤 언어든 담을 수 있는 인터페이스를 만듭니다. 메시지 카탈로그, 로케일에 맞는 서식, 글자 길이가 달라도 버티는 레이아웃, CJK와 오른쪽에서 왼쪽 지원, 올바른 URL을 가진 언어 전환을 다룹니다.

특정 화면 너비에서 깨지는 레이아웃의 진짜 원인을 찾습니다. 가로 스크롤, 넘침, 줄어들지 않는 flex 항목, 붙지 않는 sticky, 휴대폰의 100vh, 브라우저 UI 아래에 가려지는 고정 바를 다룹니다.

두 테마 모두에서 올바른 라이트·다크 모드를 만듭니다. 의미 기반 색상 토큰, 시스템 설정과 수동 전환, 로드 시 잘못된 테마가 번쩍이지 않게 하기, 두 테마에서의 대비 점검까지 다룹니다.

3계층 디자인 토큰(기본값, 시맨틱, 컴포넌트)을 설계하고 컴포넌트 명세를 작성하며, 토큰 규칙을 지키는 Chart.js 포함 HTML 슬라이드를 생성합니다.

TypeScript, Tailwind CSS, shadcn/ui로 복잡한 독립형 React 웹 아티팩트를 만듭니다.