프로필
한 사이트에 여러 디자인을 저장하고 편집기나 팝업에서 전환하세요.
4.0의 새로운 기능
새롭게 디자인한 편집기, 코딩 에이전트를 위한 명령줄, 프로필, 측면 패널.
새롭게 디자인한 편집기
처음부터 다시 만들었고, 이제 다크 모드도 지원합니다.
- 페이지의 현재 값을 보여 주는 그룹별 컨트롤
- 사이트가 업데이트되어도 계속 작동하고 다른 후보도 고를 수 있는, 개선된 선택자 생성
- 다른 규칙이 값을 덮어쓰면 표시
- 색상 팔레트와 스포이트
- 색상이나 글꼴에 마우스를 올려 페이지에서 미리 보기
- 추가 속성에서 다른 CSS 속성도 바로 편집
- 실행 취소 지원
터미널에서 쓰는 Stylebot
명령줄에서 Stylebot을 제어하거나, Claude Code, Codex, Cursor 같은 코딩 에이전트에게 맡기세요. 에이전트는 API 키 대신 사용 중인 구독을 이용해 브라우저에서 바로 사이트 스타일을 바꿉니다.
$ npm install -g @stylebot/cli
CLI 설정하기 →Chrome 또는 Edge용입니다. Firefox에서는 아직 명령줄을 사용할 수 없습니다.
측면 패널 또는 별도 창
Chrome과 Edge에서는 편집기가 측면 패널에 열립니다. 편집기의 ⋯ 메뉴에 있는 위치에서 별도 창으로 띄울 수도 있습니다.
버전 기록
모든 변경 사항이 보관되며, 이전 버전으로 언제든 복원할 수 있습니다.
동기화
Google Drive 동기화가 더 안정적입니다. 여러 컴퓨터의 변경 사항을 병합하므로 잃어버리는 내용이 없습니다. 30분마다, 그리고 편집 직후에 자동으로 실행됩니다.
채팅
코딩 에이전트가 없으신가요? 원하는 것을 설명하거나 제안된 스타일을 고르면 Stylebot이 CSS를 작성합니다. Claude, OpenAI, Gemini 키를 직접 연결해 사용하세요.
그 밖의 기능
- 새로워진 stylebot.dev
- 새로운 Stylebot 아이콘
- 이제 shadow DOM 안에도 스타일이 적용되어, 웹 컴포넌트로 만든 사이트에서도 작동
- 이제 Stylebot 단축키는 브라우저의 단축키 설정에서 관리합니다. Chrome과 Edge에서는 변경했던 단축키가 기본값으로 돌아가므로, 그곳에서 다시 설정하세요.
- Stylebot 베트남어 지원
그리고 많은 버그 수정