📋 작성한 가이드라인 상세 설명

1. 기술 스택 요구사항

• 허용된 기술만 사용: Headless UI v2.x (React용), Tailwind CSS v4.0, Hono v4 (Deno 런타임), Supabase Edge Functions with Deno KV
• 금지 사항: 루시드 UI, 루시드 아이콘, Radix UI, shadcn/ui 등 명시되지 않은 모든 UI 라이브러리 사용 금지

2. 프로젝트 구조 (ES 표준 준수)

- src/components/: Headless UI 기반 컴포넌트들
  - primitives/: 기본 UI 원시 컴포넌트
  - composite/: 조합된 복합 컴포넌트
- src/hooks/: 커스텀 React 훅
- src/services/: 비즈니스 로직과 API 호출
  - api/: 외부 API 통합
  - kv/: Deno KV 작업
- src/models/: TypeScript 타입 정의와 인터페이스
  - domain/: 도메인 모델
  - dto/: 데이터 전송 객체
- src/lib/: 공유 유틸리티와 헬퍼
- src/styles/: Tailwind CSS 설정
- supabase/functions/: Edge 함수 (Hono 기반)

3. 핵심 디자인 시스템 규칙

컴포넌트 아키텍처:

• Headless UI v2.x의 공식 컴포넌트만 사용
• Dialog, Disclosure, Listbox, Menu, Popover, Combobox, Switch, RadioGroup, Checkbox 등 사용
• data-* 속성을 활용한 상태 기반 스타일링

Tailwind CSS v4.0 스타일링:

• CSS-first 접근법 사용
• 네이티브 cascade layers 활용
• color-mix() 함수로 색상 변형
• 컨테이너 쿼리 구현
• 논리적 속성 사용 (left/right 대신 start/end)

4. 커스텀 아이콘 구현

• SVG path data로 모든 아이콘 정의
• 외부 아이콘 라이브러리 사용 금지
• 재사용 가능한 Icon 컴포넌트로 구현

5. Hono v4 Edge Function 구조

• Deno 런타임에서 실행
• jsr:@hono/hono 임포트 사용
• 미들웨어로 CORS 처리
• RESTful API 엔드포인트 구현

6. Deno KV 통합

• 키-값 데이터베이스로 데이터 영속성 관리
• 원자적 트랜잭션으로 데이터 일관성 보장
• 타입 안전한 get/set 메서드 구현

7. 상태 관리 규칙

• 로컬 상태: React hooks (useState, useReducer)만 사용
• 영속 상태: Deno KV로 서버사이드 저장
• 외부 상태 관리 라이브러리 사용 금지

8. 알림 시스템

• 모든 사용자 피드백은 토스트 알림으로만
• alert(), console.log() 사용 엄격 금지
• Headless UI의 Transition 컴포넌트로 구현

9. 파일 수정 프로토콜

컴포넌트 수정 시:

• /src/models/에서 타입 정의 확인
• /src/components/primitives/에서 기본 컴포넌트 검증
• /src/services/에서 비즈니스 로직 업데이트
• Deno 내장 테스트 러너로 테스트

10. 엄격한 개발 규칙

절대 금지 사항:

• 임시 코드 (TODO, placeholder, dummy, mock)
• 콘솔 로깅
• 임의적 판단이나 결정
• 승인되지 않은 외부 의존성
• 요청되지 않은 개선사항 추가
• 간소화된 구현
• 디버그 코드

필수 실천사항:

• 모든 UI 요소는 재사용 가능한 컴포넌트로
• 완전한 TypeScript 타이핑
• 모든 레벨에서 적절한 에러 처리
• Deno KV 원자적 작업 사용
• WCAG 2.1 AA 접근성 표준 준수
• 지연 로딩과 코드 스플리팅 구현

11. 설정 파일

• vite.config.ts: @tailwindcss/vite 플러그인 사용
• deno.json: jsr 레지스트리에서 Hono 임포트, 태스크 정의

12. 테스팅 요구사항

• Deno 내장 테스트 러너 사용
• @std/assert 라이브러리 활용
• 단위 테스트와 통합 테스트 구현

13. 배포 체크리스트

• Headless UI v2.x 사용 확인
• Tailwind CSS v4.0 유틸리티만 사용
• Hono v4 with Deno Edge Functions
• Deno KV 데이터 영속성
• 토스트 알림 시스템
• TypeScript 전체 커버리지
• 테스트 통과 확인

14. 버전 호환성 매트릭스

• Headless UI: v2.2.x (최신 2.2.9)
• Tailwind CSS: v4.0.x (2025년 1월 출시)
• Hono: v4.9.x
• Deno: v2.1.x
• Supabase Edge Functions: 최신 버전

중요 강조사항: 이 가이드라인은 절대적입니다. 피그마가 임의로 판단하거나 요청되지 않은 기능을 추가하는 경향을 엄격히 통제하기 위해, 이 가이드라인을 예외 없이 준수해야 합니다.

 

 

 

[code]

Figma Make Project Guidelines - 2025 Standards

Technology Stack Requirements

STRICTLY ALLOWED TECHNOLOGIES ONLY:

• Headless UI v2.x (React)
• Tailwind CSS v4.0
• Hono v4 (with Deno runtime)
• Supabase Edge Functions with Deno KV

PROHIBITED: Lucide UI, Lucide icons, Radix UI, shadcn/ui components, or any other UI libraries not explicitly listed above.

Project Structure (ES Standards Compliant)

project-root/
├── src/
│   ├── components/          # Headless UI-based components
│   │   ├── primitives/      # Base UI primitives
│   │   ├── composite/       # Composite components
│   │   └── index.ts         # Component exports
│   ├── hooks/               # Custom React hooks
│   │   └── index.ts
│   ├── services/            # Business logic & API calls
│   │   ├── api/            # External API integrations
│   │   ├── kv/             # Deno KV operations
│   │   └── index.ts
│   ├── models/              # TypeScript type definitions & interfaces
│   │   ├── domain/          # Domain models
│   │   ├── dto/            # Data transfer objects
│   │   └── index.ts
│   ├── lib/                 # Shared utilities & helpers
│   │   ├── constants.ts
│   │   └── utils.ts
│   ├── styles/              # Tailwind CSS configurations
│   │   └── app.css         # @import "tailwindcss"
│   └── app.tsx             # Application entry point
├── supabase/
│   └── functions/          # Edge functions (Hono-based)
│       └── api/
│           └── index.ts
├── tests/                  # Test files
├── deno.json              # Deno configuration
└── vite.config.ts         # Vite configuration

Core Design System Rules

1. Component Architecture

Base Components (Headless UI v2.x only):

• Use ONLY components from @headlessui/react v2.x
• Never create custom implementations of existing Headless UI components
• Leverage data-* attributes for state-based styling

Allowed Headless UI Components:

• Dialog, Disclosure, Listbox, Menu, Popover, Combobox
• Switch, RadioGroup, Checkbox, Transition
• Field, Fieldset, Input, Label, Description

2. Styling with Tailwind CSS v4.0

Configuration:

/* src/styles/app.css */
@import "tailwindcss";

/* Custom theme variables using CSS-first approach */
@layer theme {
  :root {
    --color-primary: oklch(59.3% 0.239 251.38);
    --color-secondary: oklch(74.8% 0.26 342.55);
  }
}

Utility Usage:

• Use Tailwind v4 native cascade layers
• Leverage color-mix() for color variations
• Implement container queries with @container
• Use logical properties (start/end instead of left/right)

3. Custom Icons

SVG Icon Implementation:

// src/components/primitives/Icon.tsx
export const IconDefinitions = {
  check: 'M20 6L9 17l-5-5',
  menu: 'M4 6h16M4 12h16M4 18h16',
  // Define all icons as path data
} as const;

export const Icon = ({ name, className }: IconProps) => (
  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor">
    <path d={IconDefinitions[name]} strokeWidth={2} />
  </svg>
);

Hono v4 Edge Function Structure

// supabase/functions/api/index.ts
import { Hono } from 'jsr:@hono/hono';
import { cors } from 'jsr:@hono/hono/cors';

const app = new Hono().basePath('/api');

// Middleware
app.use('*', cors());

// Routes
app.get('/health', (c) => c.json({ status: 'ok' }));
app.post('/data', async (c) => {
  const kv = await Deno.openKv();
  const data = await c.req.json();
  await kv.set(['data', crypto.randomUUID()], data);
  return c.json({ success: true });
});

Deno.serve(app.fetch);

Deno KV Integration

// src/services/kv/store.ts
export class KVStore {
  private kv: Deno.Kv;
  
  async initialize() {
    this.kv = await Deno.openKv();
  }
  
  async get<T>(key: Deno.KvKey): Promise<T | null> {
    const result = await this.kv.get<T>(key);
    return result.value;
  }
  
  async set<T>(key: Deno.KvKey, value: T): Promise<void> {
    await this.kv.set(key, value);
  }
  
  async atomic(operations: AtomicOperation[]): Promise<boolean> {
    const atomic = this.kv.atomic();
    // Apply operations
    const result = await atomic.commit();
    return result.ok;
  }
}

State Management Rules

Local State

• Use React hooks (useState, useReducer) for component state
• Never use external state management libraries
• Implement context API for cross-component state when necessary

Persistent State

• Use Deno KV for server-side persistence
• Implement optimistic UI updates with proper error handling
• Use atomic transactions for data consistency

Notification System

Toast Implementation (Headless UI-based):

// src/components/composite/Toast.tsx
import { Transition } from '@headlessui/react';

export const Toast = ({ show, message, type }: ToastProps) => (
  <Transition show={show}>
    <div className="fixed bottom-4 right-4 transition data-[closed]:translate-y-2 data-[closed]:opacity-0">
      <div className={`rounded-lg p-4 ${type === 'error' ? 'bg-red-500' : 'bg-green-500'}`}>
        {message}
      </div>
    </div>
  </Transition>
);

ALL user feedback MUST use toast notifications. Alert(), console.log(), or other feedback methods are PROHIBITED in production.

File Modification Protocol

When Modifying Components:

1. Check /src/models/ for type definitions
2. Verify /src/components/primitives/ for base components
3. Update /src/services/ if business logic changes
4. Test with Deno's built-in test runner

When Modifying Styles:

1. Use only Tailwind v4 utilities
2. Check theme variables in app.css
3. Verify responsive breakpoints
4. Test with native container queries

Strict Development Rules

ABSOLUTELY FORBIDDEN:

1. No Temporary Code: No TODO, placeholder, dummy, or mock implementations
2. No Console Logging: Use structured logging or toast notifications
3. No Arbitrary Decisions: Every implementation must follow these guidelines exactly
4. No External Dependencies: Only use the four approved technologies
5. No Improvements Without Request: Do not add features not explicitly requested
6. No Simplified Implementations: Full, production-ready code only
7. No Debug Code: Remove all debugging artifacts before delivery

REQUIRED PRACTICES:

1. Reusable Components: Every UI element must be a reusable component
2. Type Safety: Full TypeScript typing for all code
3. Error Boundaries: Implement proper error handling at all levels
4. Atomic Operations: Use Deno KV atomic operations for data consistency
5. Accessibility: All components must meet WCAG 2.1 AA standards
6. Performance: Lazy load components and implement code splitting

Configuration Files

vite.config.ts

import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

deno.json

{
  "imports": {
    "@hono/hono": "jsr:@hono/hono@^4.9.0",
    "@std/assert": "jsr:@std/assert@1",
    "@std/dotenv": "jsr:@std/dotenv@latest"
  },
  "tasks": {
    "dev": "deno run --allow-all --watch main.ts",
    "test": "deno test --allow-all"
  }
}

Testing Requirements

// tests/example.test.ts
import { assertEquals } from '@std/assert';

Deno.test('Component renders correctly', async () => {
  // Test implementation
  assertEquals(result, expected);
});

Deployment Checklist

• [ ] All components use Headless UI v2.x
• [ ] Styling uses only Tailwind CSS v4.0 utilities
• [ ] Edge functions use Hono v4 with Deno
• [ ] Data persistence uses Deno KV
• [ ] No external dependencies beyond approved stack
• [ ] All notifications use toast system
• [ ] No console.log statements
• [ ] Full TypeScript coverage
• [ ] Tests pass with deno test
• [ ] Production build successful

Version Compatibility Matrix

Technology	Version	Documentation
Headless UI	v2.2.x	headlessui.com
Tailwind CSS	v4.0.x	tailwindcss.com/docs/v4
Hono	v4.9.x	hono.dev
Deno	v2.1.x	docs.deno.com
Supabase Edge Functions	Latest	supabase.com/docs/guides/functions

---

CRITICAL REMINDER: This guideline is absolute. Any deviation requires explicit approval. Figma's tendency to make arbitrary decisions or add unrequested features must be strictly controlled by adhering to these guidelines without exception.

[/code]

 

 

최근 피그마로 삽질도 해보고 supabase? 인가에 대해서 좀 알아본 다음에 이 make는 소넷 3.7기반인데 어떤 스타일로 코드를 작성하는지 약간의 분석을 해봤습니다.

 

1. 피그마가 디자이너들이 애용하기도 하고 여러 용도로 쓰이는데 주로 협업시에도 시안을 만들거나 하더라구요. 그래서 그런지 피그마 기본제공이미지 라이브러리나 기본적으로 이 샘플링에 의존한 스타일을 추구했습니다.

 

2. 저는 실제기반을 중요시하게 생각해서 이런 점들이 마음에 안 들더라구요.

그래서 어떻게 하면 실제 구조를 파악하고 어떻게 이 생각과정을 컨트롤시킬까 연구를 했고, 어느정도 스타일을 찾았습니다.

 

그래서 이런 간단한 사이트구조도 만들었습니다.

 

 

 

 

 

 

 

 

 

이렇게 뷰들이랑 타입 , 훅 ,  로직들을 구성하고 supabase는 아래처럼되어있습니다.

 

 

 

 

풀시트 유저 20달러유저라면 사실상 올해 연말까지는 크레딧 개념없이 막 만들 수 있으니, 이걸로 배포까지 하시는분들이라면 스트레스 좀 덜 받고 만들면 어떨까 해서

 

피그마 가이드라인을 공유해봤습니다.

 

그래도 어느정도 스타일은 먹히나, 세션이 1개고 맥락파악기능이 없어서 매번 기억시켜주지 않는다면...

다시 하드코딩시도, 간단시도, 시키지도 않은 과도한 디버그 과정추가하려합니다.

로그인 시 1번행동, 2번행동에 대한 콘솔로그 표시같은 단순한것도

1번행동에서의 예외처리 안될경우 그것도 안될경우 이것도 저것도 요것도 미래의 이것도

식으로 무한확장하기때문에 무한루프를 계속 만들어버립니다.