翻訳準備中 — 韓国語の原文を表示しています。

primer/css

GitHub의 디자인 시스템을 구현한 CSS 라이브러리로, 웹 프로젝트에 일관된 스타일을 적용합니다.

開発の材料自由に使える · MITデザイン・UI コンポーネントSCSS難易度
13,0280 찜
1,288フォーク2Issue
デモ・公式サイトをひらくprimer.style

中辛 の解説

Primer CSS는 GitHub의 공식 디자인 시스템을 CSS로 구현한 라이브러리입니다. 패키지로 제공되며, SCSS 문법으로 작성된 소스를 Sass 컴파일러와 함께 사용합니다. 프로젝트에 설치 후 Sass 로드 경로에 추가하고 모듈 단위로 임포트(core, product, marketing 등)하여 필요한 스타일만 선택할 수 있습니다. 현재 유지보수 모드이며, 마크업이 포함된 완전한 컴포넌트는 Primer React나 Primer View Components 사용을 권장합니다.

こんなリポジトリです

こんなときに便利です

  • GitHub과 동일한 디자인 언어를 사용하여 웹 애플리케이션을 구축할 때
  • 여러 프로젝트에 걸쳐 일관된 UI 스타일을 유지하고자 할 때

主な機能

유틸리티 클래스와 컴포넌트 스타일 제공core, product, marketing 모듈 단위 선택 임포트Sass 변수와 믹스인으로 커스터마이징 가능

ほかとの違い

GitHub의 공식 디자인 시스템을 직접 구현한 만큼, 실제 GitHub 인터페이스와 동일한 시각적 언어와 일관성을 제공합니다.

食べた人たち

実際に使ってみた人の記録です — 一言も完走の記録も、確認のうえで公開しています。

試食評 · 使った人のひとこと

まだ試食評がありません。使ってみたら、最初のひとことをどうぞ。

ほかのリポジトリの試食評を見る →

このリポジトリで作られたもの

🖋 完走を記録する

まだ完走の記録がありません。最初の一膳を記録してみませんか。

このリポジトリの作り方

はじめてですか? むずかしくありません — 上から順にたどれば、自分の環境で動かして味見できます。

準備するもの

  • Node.js와 npm
  • Sass 컴파일러

すぐ動かしてみるNode.js (npm)

ギット飯がリポジトリの構成を確認して組み立てた実行コマンドです。ターミナルに貼り付ければ、取得から実行までまとめて進みます。

git clone --depth 1 https://github.com/primer/css.git &&
cd css &&
npm install

実行コマンドは README を確認してください。

コードは自分の環境で動きます — はじめて見るリポジトリなら、中身にひととおり目を通してから実行するのがおすすめです。

README の詳しい手順を見る
  1. npm으로 Primer CSS 패키지를 설치합니다.
npm install --save @primer/css
  1. Sass 프로젝트에서 다음과 같이 임포트합니다.
@import "@primer/css/index.scss";

또는 필요한 모듈만 선택하여 임포트합니다.

@import "@primer/css/core/index.scss";
@import "@primer/css/product/index.scss";
  1. Sass를 CSS로 컴파일합니다(프로젝트의 Sass 컴파일러 설정에 따름).

ギット飯トライで味見

入れるのが面倒で少し不安だったなら — 安全スキャンからインストールまで、ターミナル一行で終わります。

ターミナルに貼り付ければ、ギット飯の安全スキャン → 隔離フォルダへ clone → インストール → 実行方法の案内まで自動です。はじめてでも大丈夫 — この一行だけです。

npx gitbap-try primer/css

Node.js さえあれば、インストールなしで動きます · ギット飯トライとは? →

スター推移 · 7日

13,0287日間の増加数を計算するための比較データが不足しています

確認日時

使いやすさ · まねしやすいか

サンプル評点 34/100
  • ゆるいライセンス
  • テストあり
  • サンプル集
  • 最近の更新
  • AGENTS.md
  • llms.txt
  • テンプレート

最近の更新あり · 2015 年に作成

「デザイン・UI コンポーネント」 こういうリポジトリを毎週受け取りませんか?

毎週月曜の朝、選んだ一膳だけ。広告なし · いつでも解除。

自分のリポジトリですか? README にギット飯バッジを貼る
[![깃밥](https://www.gitbap.com/badge/primer/css.svg)](https://www.gitbap.com/r/primer/css)
Claude からそのまま使う — ギット飯のつなぎ方

ギット飯を Claude につなぐと、こうしたリポジトリを Claude・Cursor・Codex から直接さがして試せます。

方法 ① コネクタ URL

Claude の設定 → コネクタにこのアドレスを貼り付け。

https://www.gitbap.com/api/mcp
方法 ② プラグイン(試用まで)

プラグインを入れると /gitbap-trending·/gitbap-try のスラッシュコマンドで、その場でリポジトリを試せます。Claude Code で下の 2 行を順に実行してください。

/plugin marketplace add jakeparkcolde/gitbap-cowork
/plugin install gitbap-cowork@gitbap
つなぎ方をくわしく →

AI が README をもとに要約しました · 原文を見る