Aucun modèle ne vous convient ? Générez votre propre DESIGN.md génial avec .NET et Ollama

DEV - 29/05
Introduction J'ai découvert que de nombreux excellents exemples DESIGN.md sont déjà disponibles dans...
!DOCTYPE html

Introduction

J'ai trouvé que beaucoup d'excellentsCONCEPTION.mddes exemples sont déjà disponibles dans ce superbe dépôt :

  • https://github.com/VoltAgent/awesome-design-md

Introduction légère : ce référentiel est une collection organisée de fichiers prêts à l'emploiCONCEPTION.mdfichiers extraits de sites Web réels, conçus pour aider les agents d’IA à générer une interface utilisateur avec une meilleure cohérence visuelle.

Un grand mérite revient aux mainteneurs et aux contributeurs de Awesome-Design-md pour avoir poussé cette direction vers l'avant et rendu les connaissances du système de conception plus faciles à réutiliser.

Cela dit, je souhaite parfois créer quelque chose qui n'est pas inclus dans le référentiel. Surtout quand je suis d’humeur old-school et que je veux une saveur rétro qui n’est qu’à moi. ;)

Ainsi, dans ce didacticiel, nous construisons une expérience amusante : une application génératrice DESIGN.md personnalisée en C#.

L'application :

  1. Explorez une page cible.
  2. Extrayez les jetons visuels (couleurs, polices, classes sémantiques).
  3. Demandez à LLM de synthétiser unCONCEPTION.md.
  4. Demander à LLM de générer une vérificationindex.htmlde çaCONCEPTION.md.
  5. Enregistrez les deux fichiers localement.

Nous utiliserons :

  • .NET8
  • OllamaSharp
  • http://localhost:11434
  • nemotron-3-super:nuage

Ce que nous construisons

URL cible -> DesignMdGenerator.CrawlAndExtractMetadataAsync -> métadonnées de conception tokenisées (titre/couleurs/polices/classes) -> Ollama (nemotron-3-super:cloud) -> DESIGN.md -> Cycle de vérification Ollama -> index.html -> enregistrer dans Output/DesignMdGenerator
Entrer en mode plein écran Quitter le mode plein écran

Conditions préalables

  • Visual Studio ou VS Code
  • SDK .NET 8
  • Ollama fonctionnant localement
  • Modèle disponible dans votre environnement Ollama

Exécutez Ollama avec le modèle utilisé dans cette démo :

ollama exécute nemotron-3-super:cloud
Entrer en mode plein écran Quitter le mode plein écran

Si votre service Ollama fonctionne déjà surhttp://localhost:11434, tu es bon.

Étape 1 : Créer une nouvelle application console

dotnet nouvelle console -n DesignMdGeneratorDemo cd DesignMdGeneratorDemo dotnet ajouter le package OllamaSharp
Entrer en mode plein écran Quitter le mode plein écran

Étape 2 : Fichier de projet (référence)

Ton.csprojdevrait inclure au moins :

Exenet8.0activeractiver
Entrer en mode plein écran Quitter le mode plein écran

Étape 3 : AjouterProgramme.cs

Cette version se concentre uniquement sur le flux de démonstration DESIGN.md.

en utilisant DesignMdGeneratorDemo.Services ; Console.OutputEncoding = System.Text.Encoding.UTF8 ; chaîne targetUrl = args.Length > 0 ? args[0] : "https://www.yahoo.com"; chaîne modelName = args.Length > 1 ? args[1] : "nemotron-3-super:cloud"; chaîne ollamaApiUrl = args.Length > 2 ? args[2] : "http://localhost:11434"; var générateur = new DesignMdGenerator(ollamaApiUrl, modelName); var outputDirectory = Path.Combine(Directory.GetCurrentDirectory(), "Output", "DesignMdGenerator"); Console.WriteLine("Démo du générateur DESIGN.md personnalisé"); Console.WriteLine("-------------------------------"); Console.WriteLine($"URL cible : {targetUrl}"); Console.WriteLine($"Modèle : {modelName}"); Console.WriteLine($"URL Olama : {ollamaApiUrl}"); Console.WriteLine(); var résultat = attendre générateur.GenerateArtifactsAsync(targetUrl, outputDirectory); Console.WriteLine("Génération terminée."); Console.WriteLine($"DESIGN.md : {result.DesignMarkdownPath}"); Console.WriteLine($"index.html: {result.VerificationHtmlPath}"); if (!string.IsNullOrWhiteSpace(result.WarningMessage)) { Console.WriteLine(); Console.WriteLine("Aver...
[Courte citation de 8% de l'article original]