UX Whisper
close
프로필 배경
프로필 로고

UX Whisper

  • 분류 전체보기 N
    • UX-UI
    • Software & Tools N
      • AI 관련
      • 디자인 관련 (Design Related) N
      • 테스트 관련 (Test Tool)
      • 기타
    • 개발 언어 & More N
      • Angular
      • CSS N
      • 기타
    • Images
    • 기타
  • 홈
  • Reference
  • 이미지
  • 태그

Claude Design을 한 단계 끌어올리는 25가지 전술

01Design System부터 만든다색상, 타이포그래피, 로고, 이미지, UI 규칙을 먼저 정해 Claude가 매번 임의로 결정하지 않게 합니다.사이트: https://claude.ai/Claude — 디자인 시스템을 포함한 Claude 작업 환경.02좋아하는 디자인에서 시스템을 추출한다웹사이트나 스크린샷을 참고자료로 주고 색상·폰트·간격·컴포넌트 등의 규칙을 추출해 재사용합니다.사이트: https://styles.refero.design/Refero Styles — 다양한 실제 제품의 디자인 스타일과 DESIGN.md 형태의 참고자료를 탐색하는 라이브러리.03기존 디자인 시스템을 적극 활용한다처음부터 스타일을 발명하기보다 검증된 디자인 시스템을 기준으로 삼아 결과의 일관성과 완성도를 높입니다.사이트:..

  • format_list_bulleted 카테고리 없음
  • · 2026. 10. 5.
  • textsms

Refero Styles: AI에게 웹디자인의 ‘감각’을 가르쳐 주는 방법

AI에게 웹사이트를 만들어 달라고 하면 코드는 꽤 잘 만들어 준다. 그런데 한 가지 문제가 있다.“깔끔하게 만들어 줘.”“모던하게 만들어 줘.”“Apple 같은 느낌으로 만들어 줘.”이렇게 말한다고 해서 내가 머릿속으로 생각하는 디자인이 그대로 구현되는 것은 아니다.AI가 디자인을 못해서가 아니라, ‘깔끔하다’, ‘고급스럽다’, ‘모던하다’라는 말이 너무 추상적이기 때문이다.이런 문제를 해결하는 데 상당히 흥미로운 사이트가 있다.Refero Styles이다. Refero Styles 바로가기Refero Styles가 무엇인가?Refero Styles는 실제 웹사이트의 디자인을 분석해서 AI가 이해할 수 있는 디자인 시스템 형태로 정리해 놓은 라이브러리다. 다양한 실제 제품과 웹사이트의 디자인 스타일을 살..

  • format_list_bulleted Software & Tools/디자인 관련 (Design Related)
  • · 2026. 10. 5.
  • textsms

Carousels

Carousels with CSS CSS를 사용한 캐러셀 | Blog | Chrome for DevelopersCSS 몇 줄만으로 탐색 버튼과 마커가 있는 스크롤 환경을 지원합니다.developer.chrome.com::scroll-marker CSS pseudo-element ::scroll-marker CSS pseudo-element - CSS | MDN developer.mozilla.orgCSS Carousel Gallery Carousel Gallery⚠️ Unsupported features ⚠️ This gallery requires a few CSS features that aren't currently available in your browser. These features..

  • format_list_bulleted 개발 언어 & More/CSS
  • · 2026. 10. 5.
  • textsms

Sass/SCSS built-in functions

🎨 Color Functionslighten()lighten($color, 20%)Makes a color lighterdarken()darken($color, 20%)Makes a color darkerrgba()rgba($color, 0.5)Adds transparencyopacify()opacify($color, 0.2)Increases opacitytransparentize()transparentize($color, 0.2)Decreases opacitymix()mix(red, blue, 50%)Mixes two colorsadjust-color()adjust-color($color, $red: 20)Adjusts color channelsscale-color()scale-color($color..

  • format_list_bulleted 개발 언어 & More/CSS
  • · 2026. 8. 27.
  • textsms

CSS Built-In Functions

🎨 Color functionsFunctionExamplePurposergb()rgb(255 0 0)RGB colorrgba()rgba(255, 0, 0, 0.5)RGB + transparency📐 Math / sizing functionsThese are especially important in modern responsive CSS.FunctionExamplePurposecalc()calc(100% - 40px)Calculate valuesmin()min(500px, 100%)Choose smallest valuemax()max(300px, 50%)Choose largest valueclamp()clamp(16px, 2vw, 24px)Minimum → preferred → maximum🔤 St..

  • format_list_bulleted 개발 언어 & More/CSS
  • · 2026. 8. 27.
  • textsms

Claude Design 주목…AI가 바꾸는 웹디자인, 프로토타입 제작 방식

생성형 AI의 활용 범위가 콘텐츠 제작을 넘어 디자인 영역으로 확대되고 있다. 자연어를 기반으로 웹페이지와 사용자 인터페이스(UI), 프로토타입 등의 제작을 지원하는 AI 도구가 등장하면서 디자인 업무의 방식도 빠르게 변화하는 모습이다. 특히 Anthropic의 Claude를 중심으로 AI와 대화하면서 디자인 결과물을 구체화하는 방식이 주목받고 있다. 사용자가 원하는 디자인의 목적과 구성, 분위기 등을 자연어로 설명하면 AI가 이를 바탕으로 시안을 만들고, 이후 추가적인 지시를 통해 결과물을 수정하는 방식이다. AI와 대화하며 디자인…Claude Design의 특징 Claude Design의 가장 큰 특징은 디자인 과정에 자연어 인터페이스를 활용한다는..

  • format_list_bulleted Software & Tools/디자인 관련 (Design Related)
  • · 2026. 8. 12.
  • textsms
  • navigate_before
  • 1
  • 2
  • 3
  • 4
  • ···
  • 25
  • navigate_next
공지사항
전체 카테고리
  • 분류 전체보기 N
    • UX-UI
    • Software & Tools N
      • AI 관련
      • 디자인 관련 (Design Related) N
      • 테스트 관련 (Test Tool)
      • 기타
    • 개발 언어 & More N
      • Angular
      • CSS N
      • 기타
    • Images
    • 기타
최근 글
인기 글
최근 댓글
태그
  • #디자인 시스템
  • #사용자 중심 디자인
  • #사용자 경험
  • #UX/UI 디자인
  • #AI
  • #사용성 테스트
  • #머신러닝
  • #인공지능
  • #UX 디자인
  • #윤리적 ai
전체 방문자
오늘
어제
전체
반응형
Copyright © 쭈미로운 생활 All rights reserved.
Designed by JJuum

티스토리툴바