OpenDesign

Markdown이나 메모를 잡지 스타일의 긴 HTML 기사로 정리합니다. 큰 제목과 단일 열 본문에 인용문 및 코드 전용 스타일을 적용합니다.

• Markdown을 잡지 스타일 기사로 만듭니다
• 메모를 에세이로 정리합니다
• 긴 뉴스레터를 디자인합니다

로고, 색상, 글꼴, 화면과 인쇄물의 적용 예시를 한 장의 이미지로 만듭니다. 브랜드의 목적과 대상에 맞춰 일관된 디자인 방향을 시각화합니다.

• 신제품의 브랜드 이미지 공유
• 의미가 담긴 로고 방향 검토
• 색상과 글꼴 및 적용 예시 확인

Apple 제품의 화면과 조작을 설계할 때 관련 지침을 찾는 안내입니다. iOS와 macOS 등에서 설계 기초, 구성 요소, 조작 방식을 다루는 14개 스킬을 소개합니다.

• iOS 앱 설계 지침을 확인합니다
• macOS 화면 구성 요소를 찾아봅니다
• visionOS 조작 설계를 살펴봅니다

엄격한 그리드, 큰 글자와 촘촘한 데이터, 빨간 강조색으로 산업 매뉴얼이나 오래된 단말기 같은 웹 화면을 설계합니다. 종이와 주사선 질감도 활용합니다.

• 데이터가 많은 대시보드 프로토타입 제작
• 인쇄물 느낌의 포트폴리오 제작
• 어두운 단말기 스타일 화면 설계

화면 외관에 관한 프롬프트에 디자인 명세와 UI/UX 용어를 보완합니다. 화면 제작이나 디자인을 코드로 구현할 때 쓰는 요청을 구체화합니다.

• 화면 외관에 관한 요청 구체화
• 디자인을 코드로 구현할 요청 정리
• 요청문에 UI/UX 용어 보완

글과 실용 지식을 小红书 스타일의 여러 지식 카드로 정리합니다. 표지부터 요점과 요약까지 큰 글자와 부드러운 색상으로 구성하며, 게시용 스크린샷을 찍을 수 있습니다.

• 노하우를 지식 카드로 정리합니다
• 小红书용 캐러셀 게시물을 만듭니다
• WeChat 모멘트용 이미지를 만듭니다

복고풍 픽셀 스타일의 세 장면 영상을 Hyperframes용 HTML로 만듭니다. 제목과 색상을 바꾸고 장면 전환과 움직임을 갖춘 구성으로 완성합니다.

• 픽셀 스타일의 소개 영상을 만들 때
• 세 장면 영상의 내용을 교체할 때
• HTML에서 장면 전환을 확인할 때

공개 사이트의 색상, 글꼴, 로고, 이미지, 문체를 실측해 정리합니다. 브랜드 가이드와 미리보기가 있는 재사용 가능한 디자인 시스템으로 만듭니다.

• 사이트 색상과 글꼴, 로고 정리
• 참고 사이트로 브랜드 가이드 작성
• 브랜드를 나타내는 이미지 수집

Twitter나 X 게시물에 첨부할 가로형 인용문·데이터 카드를 만듭니다. 중앙의 짧은 문장에 작성자 이름, 계정, 브랜드 워터마크를 더해 이미지로 공유하기 좋게 구성합니다.

• 짧은 인용문을 게시물 이미지로 제작
• 데이터를 카드로 공유
• 작성자 정보를 넣어 생각 공유

잡지 지면과 전자종이를 떠올리게 하는 가로형 슬라이드를 만듭니다. 열 가지 배치와 다섯 가지 색상 구성으로 주장과 데이터를 인쇄물 같은 모습으로 정리합니다.

• 잡지 스타일의 자료로 주장 전달
• 연구 결과와 주요 수치 공유
• 장별로 구성한 발표 자료 제작

브라우저나 Electron에서 이미지가 저장되지 않거나 0 KB 파일로 내보내지는 문제를 조사합니다. 이미지 데이터 생성과 저장 경로를 나눠 원인을 찾고 수정합니다.

• 내보낸 이미지가 0 KB인 원인을 찾습니다
• 저장 대화상자와 쓰기 오류를 조사합니다
• Electron 이미지 저장을 수정합니다

실물 상품 사진을 바탕으로 형태·색상·소재·로고 위치 등을 유지하는 원칙에 따라 쇼핑몰용 대표·특징·사용 장면 이미지와 확인용 갤러리를 만듭니다.

• 참조 사진으로 상품 대표 이미지를 만들 때
• 한 장으로 상품의 특징을 전달할 때
• 상품을 사용하는 장면을 만들 때

React, Tailwind CSS, shadcn/ui를 사용해 여러 구성 요소를 조합한 claude.ai용 HTML 아티팩트를 제작하는 스킬입니다.

• claude.ai용 HTML을 만들 때
• 여러 구성 요소로 화면을 시제품화할 때
• React와 shadcn/ui로 제작할 때

모호한 디자인 요청을 색상, 글꼴, 레이아웃 등 여덟 가지 관점으로 구체화합니다. 구현 기준이 될 명세서와 HTML 미리보기를 만들고 보완한 기본값도 명시합니다.

• 모호한 디자인 요청 구체화
• 랜딩 페이지 색상, 글꼴과 여백 설계
• HTML 미리보기로 외관 확인

Create a tall, newspaper-style poster with a large serif headline, two-column text, and six numbered sections. A cream background, highlighted quotations, and publication details give text-heavy announcements the feel of a Sunday newspaper page.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Designing a newspaper-style announcement poster
• Presenting a manifesto in six numbered sections
• Creating a text-led editorial poster

Create a minimal prelaunch page for a new product or early testing program. Centered branding, a clear product headline, an email signup field, three benefits, and a founder note introduce the product and invite registrations.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Creating a waitlist page before a product launch
• Inviting participants to an early testing program
• Presenting three concise product benefits

Turn a song, podcast, or personal introduction into a Spotify-style now-playing card in a single HTML file. Include a CSS cover, progress bar, and playback icons, with layouts for video overlays or personal web pages.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Creating a now-playing card for a video overlay
• Presenting a personal introduction as a music card
• Displaying a song or podcast in a compact web widget

Create a web prototype with a soft, Apple-inspired appearance. Silver or cream backgrounds, double-edged rounded cards, nested buttons, and a slight spring effect on hover define the visual style and interaction.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Exploring a soft visual style for a web prototype
• Designing rounded cards and nested action buttons
• Trying a subtle spring effect on hover

Create an animated explainer poster with a pixel art mascot, moving Japanese or Chinese text, and a scrolling timeline. The retro layout uses CSS animation loops without JavaScript and can be recorded as video.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Creating a retro animated explainer
• Combining pixel art with moving Japanese text
• Preparing an animated poster for video recording

Build a looping animated hero, the large visual at the top of a page, or a video opening. Combine rotating text, a globe or abstract geometry, a timer, and floating labels with cinematic colors and one neon accent.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Creating an animated video opening
• Designing a landing page hero
• Combining motion elements into a looping visual

Design a vertical marketing poster for product announcements or social sharing. Arrange a large headline, short subtitle, key-point cards, and a brand or QR placeholder over a colorful gradient background with geometric decoration and texture.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Designing a vertical poster for a product launch
• Creating a promotional image for social sharing
• Presenting key points with a brand or QR placeholder

Turn a script into sequential visual frames with large text, timed playback, manual controls, and a progress bar. Frame timing and transition metadata support later rendering with Hyperframes or Remotion.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Introducing an AI workflow through sequential scenes
• Turning a short explanation into an animated presentation
• Preparing frames and timing metadata for video rendering

Design a Trello-style task board with four progress columns, filter controls, and cards showing labels, due dates, assignees, and comment counts. Optional grouped rows organize work by larger initiatives or assignees, with cards styled to look draggable.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Designing a task board for a team
• Showing review status alongside task progress
• Grouping tasks by assignee or larger initiative

Plan three mobile onboarding screens side by side in iPhone frames: a logo introduction, a screen explaining the app’s value, and a sign-in screen with email, Apple, Google, and a main action button.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Planning three screens for an app’s first launch
• Presenting an app’s value with an illustration and one sentence
• Designing a sign-in screen with several login options