Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

関門 2: デザイン

Abierto
  • ¿Algo no está bien?
#10 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
22/100
Tipo de issue
Nueva funcionalidad
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
css, html, typescript
Área
design, frontend

Línea de trabajo

This issue is a design gate, not an implementation task. Open the canvas at the linked Claude artifact or the copies under documents/design/mock-2026-10-05/ (Main.dc.html, Issue.dc.html, Login.dc.html; index.html is the single-page version). Compare them to the stated GitHub-light look and the three questions in the body, then leave a comment on direction, leak highlighting, and any extra screens. Done is a maintainer decision in comments, not a code change.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

見た目と体験の方向を決める関門です。agent が Claude Design の canvas にモックを 3 画面作りました。「この方向でよい / ここを変える」をコメントで返してください (「このままでよい」の 1 行でも進めます)。返答を待つ間は、デザインに依存しない第 1 弾 (D1 のスキーマと API: #5) を進めます。

画面

  1. PR の preview (Main.dc.html): GitHub の PR ページの構成 (タイトル・番号・Open のバッジ・head → base・Conversation / Files changed のタブ・本文・ファイルごとの差分)。ページ上部に漏えい候補の件数の帯 (黄色)、本文と差分の該当箇所を <mark> で強調。右上に「Delete preview」ボタン。下部に「同じ title と body で gh pr create」の案内
  2. issue の preview (Issue.dc.html): GitHub の issue ページの構成。漏えい候補が 0 件の時の帯 (緑)。GFM の表・タスクリスト・コードブロック・生の HTML のエスケープの見本
  3. ログイン (Login.dc.html): token を 1 つ入力する画面。インスタンスが 1 人用であることと、Cookie の説明

決めた見た目の方向と前提

  • 配色・余白・フォントは GitHub のライトテーマに寄せる (白地、文字 #1f2328、リンク #0969da、罫線 #d0d7de、system-ui のフォントスタック、差分は緑 #dafbe1 / 赤 #ffebe9)。GitHub のロゴ・Octicons は使わず、アイコンは線画の SVG
  • GitHub と違う点は 2 つだけ: 漏えい候補の帯と強調 (黄色)、「preview only — nothing here is on github.com」の表示と削除ボタン。「GitHub に見える」ことが目的のため、それ以外の独自の装飾を足さない
  • ~/.claude/documents/guides/visual-patterns-to-avoid.md の「画面」の項目 (クリーム色の背景・斜体の強調・番号付きのセクションラベル・pill 型のボタン) は使わない。等幅フォントは差分とコードにだけ使う
  • 見本の値 (PR #42・ファイル名・漏えい候補の文字列) は架空
  • ダークテーマは MVP に入れない (関門 2 で要望があれば子 issue にする)

返答してほしいこと

  1. この方向でよいか (GitHub にそのまま寄せる / 独自の見た目にする)
  2. 漏えい候補の見せ方 (上部の帯 + 本文の強調) でよいか
  3. 足したい画面・要素があれば

セッション再開

cd /Users/bannzai/ghq/github.com/bannzai/pre-github
claude --resume b84d4d55-461c-45bd-b620-736664c946b7
Lenguaje dominante
TypeScript
Estrellas
0
Forks
0
Merge medio
1 h 23 min
PR fusionados (30 d)
9

Preparar el entorno

  • Sin Dockerfile ni archivo de Docker Compose
  • Tiene una plantilla de pull request
  • Sin guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de bannzai/pre-github

Todos los issues de bannzai/pre-github

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.